How to extend the width size with out using height using css

Asked
Active3 hr before
Viewed126 times

11 Answers

heightusingextendwidth
90%

If you place an image on a page and do not change its height or width, either by using attributes on the <img> tag or else by CSS, it will be displayed using that intrinsic size. We have given the image in the example below a border so that you can see the extent of its size as defined in its file.,As an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixelated.,If you instead use max-width: 100%, and its intrinsic width is smaller than its container, the image will not be forced to stretch and become larger, thus preventing pixelation.

HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image file contains sizing information, described as its intrinsic size. This size is determined by the image itself, not by any formatting we happen to apply.

/n

If you place an image on a page and do not change its height or width, either by using attributes on the <img> tag or else by CSS, it will be displayed using that intrinsic size. We have given the image in the example below a border so that you can see the extent of its size as defined in its file.

<img>
load more v
88%

Designers use the DIV to create complex page layouts without using tables. Unfortunately, as layouts become more complex, browser compatibility problems increase.,Scroll - Content doesn't display outside the DIV, but the content is visible using scroll bars. ,Mozilla, Netscape, and Opera browsers interpret these values as the exact measurements and don't allow a DIV's HEIGHT or WIDTH values to extend beyond what you specify. So if you set the HEIGHT and WIDTH properties for a DIV and then insert images or text that takes up more space, the display will be a jumbled mess.

 Pretag team - issue, fix, solve, resolve
72%

height: auto; It is used to set height property to its default value. If the height property set to auto then the browser calculates the height of element.,height: length; It is used to set the height of element in form of px, cm etc. The length can not be negative.,height: inherit; It is used to set height property from its parent element.

Syntax:

height: length | percentage | auto | initial | inherit;
load more v
65%

Use the span tag with display:inline-block css attached to it. You can then use CSS and manipulate it like a div in lots of ways but if you don't include a width or height it expands and retracts based on its content.,You can use CSS Grid Layout. Support is rather wide at the moment: check it on caniuse.,If you are using jQuery UI, they already have a class the works just a charm add a <div> at the bottom inside the div that you want expand with height:auto; then add a class name ui-helper-clearfix or use this style attribute and add just like below:

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear {
   clear: both;
}
body {
   margin: 0;
}

.flex - container {
   display: flex;
   flex - direction: column;
   min - height: 100 vh;
}

header {
   background - color: #3F51B5;
  color: # fff;
}

section.content {
   flex: 1;
}

footer {
   background - color: #FFC107;
   color: #333;
}
<div class="flex-container">
   <header>
      <h1>
         Header
      </h1>
   </header>

   <section class="content">
      Content
   </section>

   <footer>
      <h4>
         Footer
      </h4>
   </footer>
</div>
load more v
75%

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html, body {
   height: 100 % ;
}
load more v
40%

Consider the below example where I set max-height for the content. But, because it’s bigger than the specified space, there is an overflow. The text is out of its parent boundaries due to that.,When the content is longer, though, it overflows and goes out of the hero wrapper. This is not good.,The issue of overflowing content is not only about the content being bigger than the fixed hero height. It could happen on screen resize as a result of text wrapping.

<div class="wrapper">
   <div class="sub"></div>
</div>
load more v
22%

That’s the power of The CSS Box Model. It calculates width and height like so:,Why the difference? To understand, let’s consider how the browser calculates the width of the elements in this example.,The width of the children (800px) is the same. However, if you enlarge the screen (or use CodePen’s 0.5x button to zoom out), you will notice that the second parent is actually larger.

You have an element, and you want it to be 640px wide and 360px tall. These are just arbitrary numbers that conform to 16:9 pixel ratio. You can set them explicitly like this:

.element {
   width: 640 px;
   height: 360 px;
}
load more v
60%

font-size transition causes reflow though.,What I do I use a js solution: Before collapsing the element I set its height through element.scrollHeight and then apply a css class with {height: 0px !important; overflow: hidden};,If a bug ever caused the element’s height style to get out of sync with its data-collapsed attribute, its behavior could have problems

CSS:
(The overflow state can be manipulated as needed for multi-level menus, etc. and of course the initial height can be set to auto or some other alternative when JS isn’t present.)

.thing - to - expand {
      height: 0;overflow: hidden;transition: height .2 s
   }

   /*---open state---*/
   .thing - to - expand.open {
      height: auto
   }

jQuery
(Falls back to instant open/close without JS.)

// HEIGHT-BASED OPEN/CLOSE ---------------------------------------------------------
// open
function heightopen() {
   $(this).height($(this).get(0).scrollHeight).addClass('open'); // get height and open
   $(this).one('webkitTransitionEnd oTransitionEnd MSTransitionEnd transitionEnd', function() { // after transition complete
      $(this).height(''); // revert to CSS-set height
   });
}

// close
function heightclose() {
   $(this).height($(this).get(0).scrollHeight).height('').removeClass('open');
}

// open & close based on open state
function heightopenclose() {
   if ($(this).hasClass('open')) { // close
      $(this).each(heightclose);
   } else { // open
      $(this).each(heightopen);
   }
}

// USE ON STUFF --------------------------------------------
$('.thing-to-expand-toggle').click(function() {
   if ($(this).hasClass('open')) { // close
      $(this).removeClass('open');

      // close other expanders
      $('.thing-to-expand').each(heightclose);
      $('.thing-to-expand-toggle').removeClass('open');
   } else { // open
      $(this).addClass('open');
   }

   $('.thing-to-expand').each(heightopenclose);
});
load more v
48%

Define the size of layout regions using flexbox properties and media queries for specific viewport sizes, so they enlarge, shrink or wrap in the available space and respond to zoom levels; ,Define the width and max-width property for labels and inputs so they enlarge or shrink in the available space and respond to zoom levels. ,All labels and inputs require design finesse by making sure the original size fits the biggest size of the available spaces to achieve good-looking results at a wide range of viewport sizes and zoom levels. For help on flexbox please see the MDN article on Flexbox.

The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the width and max-width for the labels and inputs. The max-width is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the select have intrinsic sizing.


<style>

/* Fitting Inputs Styling */

.form-group {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -1rem 1rem -1rem;
}

[class*="form-col"] {
  flex: 0 1 100%;
  padding: 0 1rem;
}

@media (min-width: 576px) {
  .form-col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  
  .form-col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  
  .offset-form-col-4 {
    margin-left: 33.33333%;
  }
  
}

input {
  display: block;
  width: 100%;
}

label,
select {
  display: block;
  width: 100%;
  max-width: 100%;
}

</style>

<div class="form-group">
  <div class="form-col-4">
    <label for="fname">First Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="fname" autocomplete="given-name">
  </div>
</div>

<div class="form-group">
  <div class="form-col-4">
    <label for="lname">Last Name</label>
  </div>
  <div class="form-col-8">
    <input type="text" id="lname" autocomplete="family-name">
  </div>
</div>

<div class="form-group">
  <div class="form-col-4">
   <label for="favorite-fruit">Favorite fruit</label>
  </div>
  <div id="favorite-fruit" class="form-col-8">
    <select>
      <option>Banana</option>
      <option>Pineapple</option>
      <option>Strawberry</option>
    </select>
  </div>
</div>

<div class="form-group">
  <div class="offset-form-col-4 form-col-8">
    <button>Submit</button>
  </div>
</div>

23%

The following simple example uses HTML and CSS to create a fitting image. The layout regions adjust their size as the viewport is adjusted. The images subsequently adjust their size to fit within the layout region containers. ,The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the max-width and auto size for the height of the image to remain the original dimensions. ,For content read horizontally, check that all images fit in their available space without horizontal scrolling.

The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the max-width and auto size for the height of the image to remain the original dimensions.


<style>

/* Fitting Images Styling */

.img-responsive {
  max-width: 100%;
}

</style>

<div class="panel">
  <img class="img-responsive" src="..." alt="">
  ...
</div>

90%

Set min-width and max-width of an element This example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.,Set the height and width of an image using percent This example demonstrates how to set the height and width of an image using a percent value.,Set the height and width of elements This example demonstrates how to set the height and width of different elements.


/n

The CSS height and width properties are used to set the height and width of an element.

height

/n

The CSS height and width properties are used to set the height and width of an element.

width
load more v

Other "height-using" queries related to "How to extend the width size with out using height using css"