I've created a jsfiddle: http://jsfiddle.net/cMqTd/1/
I have three divs. A parent, a header, and a content. The header's height is unkown, and the content div should fill the remainder space.
I tried height: 100% but it isn't what I expected.
Try floating the header:
#head {
background: green;
float: left;
width: 100%;
}
Floating the header works fine (don't know why the downvotes on Bryce's answer).
HTML:
<div id="parent">
<div id="head">head<br />head<br />head<br /></div>
<div id="content">content</div>
</div>
CSS:
html, body {
margin: 0px;
height: 100%;
}
#parent {
background: red;
height: 100%;
}
#head {
background: green;
width: 100%;
float: left;
}
#content {
background: yellow;
min-height: 100%;
}
And the working JSFiddle.
[EDIT]
Changed the height of #content to min-height.
Related
body {
background-color: blueviolet;
}
.leftcolumn {
width: 30%;
height: 100%;
float: left;
background-color: brown;
}
.middlecolumn {
float: left;
background-color: yellowgreen;
width: 60%;
height: 100%;
}
<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>
I am trying to make three columns next to each other whilst being 100% in height.
I think the problem is that I used 'float: left;', but I wouldn't know what I should've needed to use.
Since both left and middle columns are div, it will be by default display: block, you need to override it to display: inline-block to adjust in the same row.
Other than that the columns are taking 100% height, I have tried giving 100vh to the body, so it is working as expected.
body {
background-color: blueviolet;
height: 100vh;
}
.leftcolumn, .middlecolumn {
height: 100%;
display: inline-block;
}
.leftcolumn {
width: 30%;
background-color: brown;
}
.middlecolumn {
background-color: yellowgreen;
width: 60%;
}
<body>
<div class="leftcolumn">
<div>
test1
</div>
</div>
<div class="middlecolumn">
test2
</div>
</body>
The reason the columns are not the full height is because you are using height: 100% on the columns
This inherits the full height of the parent element which is the body in this case, to simply fix this, add a height to your body like so:
body {
background-color: blueviolet;
height: 100vh;
margin: 0;
}
The Margin: 0 is there to not make the page overflow
This is because you have to add height to html, body.
can u please use this code in css, it will work.
body,html{height:100%};
I'm trying to figure out how to create a layout with:
- a fixed height header and not fixed
- two sidebars (one in each side)
- a column between the sidebars
- a fixed height footer sticky at the bottom of the page and that moves accordingly to the content (here is the problem, maybe)
I've seen many similar questions, but none of them seen to work with 3 columns.
I'm not sure, but I think it's something related to floating the columns of the content.
Here's the HTML code:
<div id="wrapper">
<div id="header">Header is ok</div>
<div id="container">
<div id="column-left"></div>
<div id="content"></div>
<div id="column-right"></div>
</div>
<div id="footer"></div>
Here's the CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
height: 100%;
position:relative;
}
#header {
background: green;
height: 60px;
position: absolute;
width: 100%;
}
#container {
margin: 0 auto;
width: 80%;
padding-top: 60px; /* size of header */
padding-bottom: 100px; /* size of footer */
background: red;
height: 100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
#column-left {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#column-right {
width: 20%;
min-height: 100%;
background: yellow;
float: left;
}
#content {
float: left;
width: 60%;
min-height: 100%;
background: pink;
}
Here's an example of what's happening when I add some content:
http://jsfiddle.net/Lzp67xyu/
See this fiddle
Change positioning of #footer to relative and add clear:both to #footer.
That is, the CSS for #footer would be like
#footer {
clear: both;
position:relative;
bottom:0;
width:100%;
height: 100px;
background: blue;
}
According to the docs
The clear property specifies on which sides of an element where
floating elements are not allowed to float.
Putting a margin-bottom on the container with your columns in it will keep the space below it where the footer would be.
.columnncontainer{
width:80%;
margin-bottom:50px;
background-color:yellow;
display:inline-block;
}
Here's a JSFiddle I came up with as example:
http://jsfiddle.net/y5xwop8h/1/
My HTML has 2 divs inside an outer div:
<div class="outer">
<div class="col-left">
<p>Lorem Ipsum is simply dummy text of the...
</div>
<div class="col-right">Right</div>
<div class="clear"></div>
</div>
The CSS is:
.outer {
border: 1px solid black;
}
.col-left {
float: left;
background: cyan;
width: 80%
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
The height: 100% takes effect only if I set a px height on the .outer class, however, I have a situation in which the height should not be fixed.
How can I use height 100% without specifying in its parent a fixed height?
I'm going to use what Layne wrote in the comments.
This CAN be done, but it's tricky. You need to let html and body know their height before you can tell things inside of them to be 100 height etc. --- So, if html doesn't have a height, than how will body know what to be 100% of? and on down the line. It's a slippery slope that I slide down every other day.
html, body {
height: 100%;
}
.outer {
border: 1px solid black;
/* I use this instead of the micro clear-fix in this case - look that up */
overflow: hidden;
height: 100%;
}
.col-left {
float: left;
background: cyan;
width: 80%;
min-height: 100%;
}
.col-right {
float: left;
width: 20%;
background: yellow;
height: 100%;
}
http://jsfiddle.net/sheriffderek/fdxGZ/
This is also an issue with "sticky" footers and stuff:
Always a battle http://codepen.io/sheriffderek/pen/ziGbE
I hope that helps!
if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen.
http://jsfiddle.net/brandonbabb/SL3FC/
html, body {
height:100%
}
.outer {
border: 1px solid black;
height: 100%;
max-height: 500px
}
.col-left {
float: left;
background: cyan;
width: 80%;
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
use jquery
$(document).ready(function(){
var outerheight = $('.outer').height();
$('.col-right').height(outerheight);
});
I'm trying to build a liquid layout with two columns and a fixed footer at the bottom. I already take some help here, and I have one example above.
http://jsfiddle.net/kpDDM/18/
The problem on my example is that it has a fixed height. When I move to 100% heigh on my content div, the content collaps.
Do you need something like this : http://jsfiddle.net/kpDDM/44/
HTML
<div class="all">
<div class="content">
<div class="left"> </div>
<div class="right"> </div>
</div>
<div class="footer"></div>
</div>
CSS
.all {
position: relative;
height: 100%;
width: 100%;
}
body,html{
height:100%;
}
.content {
display:inline-block;
height: 90%;
width: 100%;
}
.left {
display: inline-block;
float: left;
width: 60%;
height: 100%;
background-color: red;
}
.right {
display:inline-block;
float: left;
width: 40%;
height: 100%;
background-color: blue;
}
.footer {
display: inline-block;
width: 100%;
height: 10%;
background-color: green;
}
Explanation
The problem is that the body tag does not have 100% itself. You have to assign that to body and then it'll work. In the above example I assumed that the content + footer share 100% of the height. 90% + 10%
I have a html like this:
<div id="container">
<div id="c1">
</div>
<div id="c2">
</div>
</div>
And I have this css codes:
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#container {
height: 100%;
background: #CCFFCC;
}
#c2{
background: #CC11CC;
min-height: 100%;
}
#c1{
background: #CC44AA;
height: 50px;
}
</style>
I want c2 div's height to expand as %100 of parent div minus c1's height. Because I don't want scroll to be shown in my page. How can i do it?
How can i do it?
You have to add the space of the topmost element as a margin to your c2 div and tell the browser to calculate the rest of the height with width: autoM:
#c2{
background: #CC11CC;
height: auto;
margin-top: 50px; /*equal to height of #c1*/
}
#c1{
background: #CC44AA;
height: 50px;
}
Here's an example.
This should make it display as you expect. :)
Updated example:
#c1{
background: #blue;
height: 50px;
}
#c2{
background: #orange;
height: 100%;
}
I found a soliton like that, and it works:
http://jsfiddle.net/Us5Cn/