How to Get a Div to Resize Its Height to Fit Container

How to get a div to resize its height to fit container?

Simple Way

You can achieve this with setting both the top and bottom attributes of the nav to 0 and the position: absolute. Set the container to position: relative.

See how this is done

Modern Way (Flexbox)

IE11+ and all modern browsers support flexbox.

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex-grow: 1;
}

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</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

Resizing div to its container?

If you want an element to be a square (ratio of 1:1) then just add padding-bottom: 100% to it. If you want that square to have content then the inner content of that square must be absolutely positioned.

body { width: 200px; }
.square {  padding-bottom: 100%; /* 1:1 aspect ratio (square) */  border:1px solid red;  position: relative;}

<div class="square"></div>

Make div auto resize to fit its container height

You can try this:

.left {
    width: 200px;
    overflow: auto;
    background-color: blue;
    position:absolute;
    top:140px;
    left:0;
    bottom:0;
}

.right {
    width: 300px;
    min-height: 260px;
    overflow: auto;
    background-color: green;
    margin-left:200px;
}

demonstration

Hope I understood the question corectly - now works fine, if you try changing content height.

How to resize image to fit in its container with CSS

You need to use object-fit:cover css property to img or video should be resized to fit its container.

Run Snippet below.

.parent {
  border: 1px solid;
  width: 20vh;
  height: 20vh;
  overflow: hidden;
  display: flex;
}

img {
  max-width: inherit;
  max-height: inherit;
  height: inherit;
  width: inherit;
  object-fit: cover;
}

<div class="parent">
  <img src="https://images.pexels.com/photos/1123982/pexels-photo-1123982.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</div>

Resize div to fit screen

You could use CSS flex for this.

It could look something like this:

body,html{            margin: 0;            padding: 0;        }        #container{            position: absolute;            width:100%;            height: 100%;            display:flex;            flex-direction: column;        }        .img{            background: blue;            width: 100%;            height: 50%;            vertical-align: top;            }

<div id = 'container'>    <p>Text 1</p>    <div class="img"></div>    <div class="img"></div>    <p>Text 2</p></div>

CSS: Auto resize div to fit container width

You can overflow:hidden to your #content. Write like this:

#content
{
    min-width:700px;
    margin-left:10px;
    overflow:hidden;
    background-color:AppWorkspace;
}

Check this http://jsfiddle.net/Zvt2j/1/

How to resize container height based on browser width

Use dynamic values such as vw or viewport width. For example, to keep your black borders you can set box1 to width: 40vw;. This means box1 will use 40% of the viewport size when resizing, and the container-black will maintain 10% of viewport width on any device. Allowing it to be responsive.

The Dynamic Viewport is the viewport sized with dynamic consideration of any UA interfaces. It will automatically adjust itself in response to UA interface elements being shown or not

css-tricks.com

EDIT -- added 2 more container-blacks and nested them in parent container and defined their height based of % so that they resize responsively.

.container-black {
    height: 33%;
    width: 100vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 8px grey;
}

.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
    width: 40vw;
    background-color: red;
}

.container {
  height: 100vw;
}

<body>
<div class="container">
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
    <div class="container-black">
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        <div class="box1">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda libero quidem minima tenetur delectus,
                iusto hic perferendis repudiandae soluta maxime nemo facere rem vero officiis! Illo deserunt eum ullam
                eligendi!</p>
        </div>
        
    </div>
</div>
</body>

How to Get a Div to Resize Its Height to Fit Container