Css: Auto Height on Containing Div, 100% Height on Background Div Inside Containing Div

Set div to 100% height of parent even when viewport is larger than parent

you should use "position:relative;" for parent div,
test this :

<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">
  <body style="height:100%; margin:0; padding:0">

    <div style="position:relative; height:2000px; margin:0; padding:0; background-color:red">
      // Background div.
      <div style=" position:absolute; top:0; height:100%; width:100%; min-width:100%; background-color:blue">
      </div>

      // More divs with content on top.

    </div>
  </body>
</html>

100% height for div inside another div with margins

You can use css flex property for #wrapper

#wrapper {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#outer{ width: 200px; height: 200px; background-color: yellow; margin: 20px; overflow: hidden; position: absolute;}
#wrapper /* adding flex */{  display: flex;flex-flow: column;height: 100%;}
#inner{ border: 1px solid red; height: 100%;}

<div id="outer"> <div id="wrapper">  <div id="inner">   a  </div> </div></div>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Inner div with 100% height of parent div

Not any large reason you are use two times height property with different value that's why not work,

Check this `Demo jsFiddle`

position: relative; another display: block; and third height: 100%; this three properties are great roll to archive 100% height.

CSS

html, body{
    height: 100%;
}
.hlavicka{
    position: relative;
    float: left;
    width: 260px;
    height:100%;
    background-color: grey;
}
.obsah_in_1_3 {
    float: left;
    width: 33%;
    background-color: #FF0000;
    height: 100%;
}
.obsah_in_2_3 {
    float: left;
    width: 33%;
    background-color: #00FF00;
    height: 100%;
}
.obsah_in_3_3 {
    float: left;
    width: 34%;
    background-color: #0000FF;
    height: 100%;
}
.obsah{
    position: relative;
    display: block;
    height: 100%;
    float: left;
    width: 50%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: blue;
}

Hope now this help you!

100% height child div in auto height parent

Don't float the right column at all, just give it a large enough margin to accommodate the left column. Floated elements are removed from the normal document flow and contribute nothing to the height of their parent; so, if you float both the right and left columns, your red #box element ends up with no height and you don't see it; if you stop floating the right column, then it really will determine the height of #box. If you don't float #right_column at all then it will expand to use all of the available width in #box.

Something like this:

<div id="container">
    <div id="box">
        <div id="left_column">
            <p>details stuff yada yada yada</p>
        </div>
        <div id="right_column">
            <p>other stuff yada yada yada test test test test test stuff stuff content content content content content stuff stuff example stuff test stuff content content stuff content example</p>
        </div>
    </div>
</div>

CSS:

#container {
    width: 400px;
}
#box {
    background-color: red;
}
#left_column {
    width: 200px;
    background-color: blue;
    float: left;
}
#right_column{
    margin: 0 0 0 200px;
    background-color: green;
}

Updated fiddle: http://jsfiddle.net/ambiguous/eDTdQ/

Alternatively, you could add a width: 200px to #right_column and let it keep floating, then add overflow: hidden to #box so that #box expands to contain its floated children:

#box {
    background-color: red;
    overflow: hidden;
}
#right_column{
    background-color: green;
    float: left;
    width: 200px;
}

Live version of this approach: http://jsfiddle.net/ambiguous/eDTdQ/2/

If you want the right column to auto-stretch and you want both columns to be full-height, then you can absolutely position the left column instead of floating it:

#box {
    background-color: red;
    position: relative;
}
#left_column {
    width: 200px;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

Live: http://jsfiddle.net/ambiguous/3Cxe3/

How to get div height to auto-adjust to background size?

Another, perhaps inefficient, solution would be to include the image under an img element set to visibility: hidden;. Then make the background-image of the surrounding div the same as the image.

This will set the surrounding div to the size of the image in the img element but display it as a background.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Div height 100% and expands to fit content

Here is what you should do in the CSS style, on the main div

display: block;
overflow: auto;

And do not touch height

CSS child div extends with it's content even if it's parent has fixed height

You don't need to use fit-content (which is not supported in Firefox: https://caniuse.com/#feat=mdn-css_properties_height_fit-content), you simply need to disable the stertch effect by adding align-self:flex-start; to the needed element

.main-container {  height: 250px;  background-color: green;  display: flex;  flex: 0 1 auto;  overflow: auto;}.div1 {  width: 100%;  align-self:flex-start;  background-color: lightcoral;}.div2 {  width: 100%;  background-color: lightgrey;}.div3 {  width: 100%;  background-color: lightpink;}div p {  font-size: 10em;}

<div class="main-container">  <div class="div1">    <p>a</p>  </div>  <div class="div2">q</div>  <div class="div3">s</div></div>

Css: Auto Height on Containing Div, 100% Height on Background Div Inside Containing Div

Set div to 100% height of parent even when viewport is larger than parent

100% height for div inside another div with margins

How to force child div to be 100% of parent div's height without specifying parent's height?

Inner div with 100% height of parent div

Check this `Demo jsFiddle`

CSS

100% height child div in auto height parent

How to get div height to auto-adjust to background size?

Div height 100% and expands to fit content

CSS child div extends with it's content even if it's parent has fixed height

Related Topics

Leave a reply

Set div to 100% height of parent even when viewport is larger than parent

100% height for div inside another div with margins

How to force child div to be 100% of parent div's height without specifying parent's height?

Inner div with 100% height of parent div

Check this Demo jsFiddle

CSS

100% height child div in auto height parent

How to get div height to auto-adjust to background size?

Div height 100% and expands to fit content

CSS child div extends with it's content even if it's parent has fixed height

Related Topics

Leave a reply

Check this `Demo jsFiddle`