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.
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.
My CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
.wrapper{
width:80%;
height:100%;
min-height:auto
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background:red;
}
.wrapped-nav{
width:30%;
float:left;
background:green;
height:auto;
min-height:100%;
}
.wrapped-ent{
width:70%;
float:left;
background:blue;
height:auto;
min-height:100%;
}
My HTML
<body>
<div class="wrapper">
<div class="wrapped-nav">Nav
</div>
<div class="wrapped-ent"></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Example</div>
</div>
</body>
jsbin: http://jsbin.com/cefegifula/edit?html,css,output
When I enlarged the Ent div with those and this overcome the div Nav, a space is created as in the jsbin show, is there a way to do 2 divs has the same height?
create a class that has height and refactor your code so that both divs have it.
so instead of using 100% for both divs use vh, px, or em to your advantage.
I would write it so that you have something like this.
<div class="class1 heightfix">
</div>
<div class="class2 heightfix">
</div>
and then in your css write
.heightfix{
height: 70vh; // or px or whatever.
}
in other news never try to use <br/> in order to fix your spacing problems.
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!!!
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.
I have an issue with a page I'm doing.
A Snippet of the code:
<div id="header"> // header..
</div>
<div id="content"> // content where ajax is loaded (should be atleast 100% of the site height)
<!-- ajax -->
</div>
<div id="footer"> //empty atm.
</div>
now for the css:
#content{
margin-left:auto;
margin-right:auto;
background-color:#767670;
width:800px;
border-left:1px solid #9F9793;
border-right:1px solid #9F9793;
position:relative;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#footer{
width:100%;
height:40px;
border-top:1px solid #9F9793;
border-bottom:1px solid #9F9793;
background-color:#767670;
}
I want the container to be from the header to the footer, I tried to apply the code and tips that I found, yet without success. Appreciating any answers!
#content{
height:100%;
}
This implies that content div takes 100% of the parent container, which in this case is html.
So write
html{
height:100%;
}