Here is my HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!
Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
This article discusses both the issue and solution in detail:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This might help too:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
See here for more details on the above:
How to make a floated div 100% height of its parent?
The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style>
<body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
You should be able to use just
margin:0;
padding:0;
height:100%;
For the conatainers to get what you want.
Related
I have a div with min-height=100; with a div inside it.
Now I want to use height=80%; for inner div but it doesn't work.
Please check the html and css section:
html,body{
width:100%;
height:100%;
}
.outer{
width:100%;
min-height:100%;
background-color:gray;
border:5px solid red;
}
.inner{
height:80%;
background-color:red;
}
<div class="outer">
</div>
<div class="outer">
<div class="inner">
</div>
</div>
It works when I use height instead of min-height for outer div but I can't use height because the height of the content of inner div is not fixed.
For fiddlers:
jsfiddle (updated with 3d outer div that have more than 100% height):
https://jsfiddle.net/mr_seven/d9ubjpe4/9/
Thanks
Just use height: 80%. After all, you're setting the min-height to 100%, which is also the max-height. So, it seems slightly pointless. Also, you need to give your div a width.
This should work for you:
HTML:
body, html {
height: 100%;
}
.outer {
background-color: gray;
height: 100%;
}
.inner {
background-color: red;
height: 80%;
}
CSS:
<div class="outer">
outer
<div class="inner">
inner
</div>
</div>
Isn't it better to play with padding-bottom instead of struggling with min-height?
html,body{
width:100%;
height:100%;
}
.outer{
width:100%;
height: 100%;
min-height:80%;
background-color:yellow;
border:5px solid red;
}
.inner{
height:80%;
background-color:blue;
}
<div class="outer">
</div>
<div class="outer">
<div class="inner">
</div>
</div>
Are you looking for this..Fiddler
<div class="outer">
</div>
<div class="outer">
<div class="inner">
</div>
</div>
css
html,body{
width:100%;
height:100%;
}
.outer{
width:100%;
height:100%;
min-height:100%;
background-color:gray;
border:5px solid red;
display: table;
}
.inner{
height:80%;
background-color:red;
}
The problem has been solved with some jQuery codes.
$(".inner").parent().addClass('fixedheight');
CSS:
fixedheight{
height:100%;
}
Now all of my outer div's will have min-height=100%; and if one of them (or more than one) have inner div, the outer div will have fixed height.
I'am trying to have header,content and footer as dynamic fields. Tried a lot of different solutions, and it must work in multiply instances. I need a the scroller only in content area, so I haven't used absolute zero on the footer. But uses table layout.
If you look at the code snippet, you can see that the content #wrapper(yellow) have the same size as content. But I can't get the scoller when content (#overflow, black) get heigher than the wrapper.
I know a little script can solve this, but is it possible just With CSS??
The link below is something simular but there is no good answer. Maybe this can be, If it is possible to get a working scroller in content area.
CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
#wrap {
height: 150px;
width: 400px;
display:table;
position:absolute;
text-align:center;
table-layout:fixed;
border:1px solid black;
}
#header{
display:table-row;
border:1px solid red;
background:green;
}
#content{
height: 100%;
background:blue;
display:table-cell;
}
#wrapper{
width:100%;
min-height:100%;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
#footer{
width: 100%;
display:table-row;
background:green;
}
</style>
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="content">
<div id="wrapper">
<div id="overflow" style="height:50px;width:1px;border:10px solid black;"></div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
You should specificy a height for the wrapper element
#wrapper{
width:100%;
/*min-height:100%;*/
height:100px;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
Here the working Fiddle with your example.
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I am trying to make an html page with 2 divs : "top" and "main"
The top <div> must take the place of its contained elements, the main <div> must take all the remaining place.
Here is what I tried:
CSS CODE :
html,body{
height:100%;
}
#top{
background-color : red;
padding:10px;
border:1px solid;
}
#main{
background-color : blue;
height:100%;
padding:10px;
border:1px solid;
}
#content1{
background-color:yellow;
}
#content2{
background-color:yellow;
height :100%;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="top">
<div id="content1">content1</div>
</div>
<div id="main">
<div id="content2">content2</div>
</div>
</body>
</html>
Here is the jsFiddle
As you can see, the "100%" I set on "content2" causes this div to take 100% of the page height instead of just the remaining space. Is there a magic css property to fix this?
EDIT:
Thank you for all your solutions.
I finally chose the solution proposed by Riccardo Pasianotto based on CSS properties display:table and display:table-row.
Here is my final HTML CODE:
<!DOCTYPE html>
<body>
<div id="content1" class="row">
<div class="subcontent">
<div class="subContentContainer">
content1
</div>
</div>
</div>
<div id="content2" class="row">
<div class="subcontent">
<div class="subContentContainer">
content2
</div>
</div>
</div>
</body>
Here is the corresponding CSS CODE:
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
body{
display:table;
}
.row{
display:table-row;
width:100%;
}
#top{
height:100px;
}
#content1{
background:#aa5555;
padding:10px;
}
#content2{
background:#5555AA;
height:100%;
}
.subcontent{
padding : 10px;
height:100%;
}
.subContentContainer{
background-color:yellow;
height:100%;
}
And here is the corresponding Jsfiddle.
DEMOJF
For doing this you have to use display:table so edit in that way
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
}
.row {
display: table-row;
width: 100%;
background: red;
}
#top {
height: 100px;
}
#content1 {
background: yellow;
height: 100%;
}
#content2 {
overflow: scroll;
height: 100%;
border: 1px solid black;
}
<body>
<div id="top" class="row">
<div id="content1">content1</div>
</div>
<div id="main" class="row">
<div id="content2">content2</div>
</div>
</body>
What I often do is making a container without padding to min-height: 100% and let my content have its proper height (auto) :
This will make something like this :
#container {
background-color : #5555AA;
min-height: 100%;
}
#content2 {
background-color:yellow;
margin: 10px;
}
http://jsfiddle.net/5cEdq/25/
I don't know if this is exactly what you want, but you can't make a div just "fill the remaning space" without making it absolute. What you don't really want either.
try this:
http://jsfiddle.net/5cEdq/16/
CSS :
html,body{
height:100%;
Padding:0;
margin:0;
border:0;}
Since both Divs are using 100% height set on the html and body tag you only need to set it there then zero your margin and padding. Generally if you have to set a div and its parent div both to 100% height you're overdoing it.
Is there a magic css property to fix this?
Yes there is. It's called box-sizing
Read this article for more info about the box-sizing property.
FIDDLE
So if your header was say 64px high, then you'd do something like this:
.container {
height: 100%;
background: pink;
margin-top: -64px;
padding-top: 64px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<header>header</header>
<div class="container">
<div class="content">
content here
</div>
</div>
I'm creating a complex website, which has quite a bit of code. So I created a JS Fiddle script that re-creates the problem I'm facing.
In short, we have a main container, and in the container is a left column floated to the left and the main content column flatting to the right.
As you can see in the example, the #sideColumn is not expanding to cover 100% of the height of the #container as the #mainColumn grows. The "blue" should automatically extent from the top (as shown) all the way to the bottom of the container as the #mainColumn grows/decrease. In other words, the #sideColumn should always equal the height of the container (automatically).
Here's the Fiddle - what am I doing wrong? http://jsfiddle.net/dLyfD/
Could do something like this:
HTML:
<div id="container">
<div id="sideColumn"></div>
<div id="mainColumn">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
CSS:
#container {
width:500px;
overflow:hidden;
border:1px solid #CCC;
position: relative;
}
#sideColumn {
padding:20px 0;
width:200px;
overflow:hidden;
background:blue;
position: absolute;
height: 100%;
}
#mainColumn {
padding:20px 0;
float:right;
width:300px;
background:yellow;
}
.test {
width:250px;
height:50px;
margin:15px 25px;
background:red;
}
http://jsfiddle.net/dLyfD/1/