Auto height of div
div
's will naturally resize in accordance with their content.
If you set no height on your div, it will expand to contain its conent.
An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div (wrapper) clears the floats.
Here's some ways to do this:
#wrapper{
overflow:hidden;
}
Or
#wrapper:after
{
content:".";
display:block;
clear:both;
visibility:hidden;
}
CSS - Automatic div height?
when you are setting height: 100%;
as relative
then this means that #container
should have height 100%
in relation to the parent of container
id, which in this case should be body
.
Set body,html{height:100%}
and this should work!
Eg
<div id="wrapper">
<div class="container">
</div>
</div>
If you have to give
.container
{
height: 100%;
position: relative
}
then
#wrapper
{
height:100%;
}
is a must!
Div auto height not working
The problem is your search-box
div has a fixed height and your result
div has position: absolute;
which prevents your card
div to grow.
Absolutely positioned elements are not counted as part of document flow, so their width and height won't affect the dimensions of their parents.
Simply change the position: absolute;
to position:relative;
will fix your problem.
make div's height expand with its content
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; }
Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:
body {
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
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>
How to auto adjust the div height according to content in it?
Try with the following mark-up instead of directly specifying height:
.box-centerside {
background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;
float: left;
min-height: 100px;
width: 260px;
}
<div class="box-centerside">
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
This is sample content<br>
</div>
div container and iframe auto height
There is your code with HTML, CSS and JS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#outerdiv {
width: 100%;
height: 220px;
min-height: 100px;
overflow: hidden;
border-style: solid;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
#inneriframe {
position: absolute;
top: --0px;
left: -0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='outerdiv'>
<iframe src="http://sampleiframe.org" id='inneriframe' scrolling=no frameborder="no"></iframe>
</div>
<script>
(function() {
"use strict";
var page = document.querySelector('#outerdiv'),
height = document.documentElement.clientHeight,
frame = document.querySelector('#inneriframe');
page.style.height = height + 'px';
frame.style.height = height + 'px';
})();
</script>
</body>
</html>
auto height for a html div auto scrolling - Div to take remaining height
Here is the updated fiddle:
Fiddle
<div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
<div style="width:100%;height:20%;background:blue;overflow:auto;float:left;">
ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>
</div>
<div style="width:100%;height:80%;background:yellow;float:left;overflow:auto;">
ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>ggdhhd
<br/>
<br/>
</div>
</div>
Related Topics
Hiding Table Data Using <Div Style="Display:None">
CSS - Position: Absolute; - Auto Height
Prevent Twitter Bootstrap Empty <Dd> Filling with Next <Dd> Value
Can Flexbox Divide Items Evenly on Multiple Rows
CSS Transitions with :Before and :After Pseudo Elements
Changing <A> Link Underline Color
What Browsers Support "!Important"
Anyway to Have a Label Respond to :Focus CSS
Using CSS to Duplicate HTML Elements
How to Make Angled Tab Like This Using CSS
In Visual Studio 2010, How to Easily Comment Out Lines in CSS
Is There a CSS Workaround for Firefox' Bug: Inline-Block + First-Letter with Changed Size
Bootstrap 4 Ie 11 Does Not Work
Linking to CSS Files from React Index
Can't Stop CSS Animation Disappearing After Last Key Frame
How to Stop a CSS Layout from Distorting When Zooming In/Out