I want to make a webpage with <div> and 100% height. I keep having problems with the height. I now have a height of 100% + 100px;
I create a header div which is 100px height. That is the only static height I use. Below that div I made another div which should fill the page. But when I set this to 100% it will add 100% to the 100px. When I set this to auto it will be only +- 150px height. This is the HTML
<!-- header -->
<div id="header">
<div id="logo"></div>
<div id="menuTop">menutop</div>
</div>
<!-- center -->
<div id="linkerbalk">
<div id="login">login naam</div>
<div id="menuLinks">Menu<br />Menu<br />Menu<br />Menu<br />Menu<br /></div>
</div>
<!-- footer -->
and the CSS i use is this:
html,body {
height:100%
}
body {
position:relative;
margin:0;
}
#header {
width:auto;
height:100px;
background-color:#FC3;
overflow:hidden;
}
#logo {
background:url(../img/logo.png);
background-position:center;
background-repeat:no-repeat;
background-color:#27c9cb;
height:100px;
width:250px;
float:left;
overflow:hidden;
}
#menuTop {
overflow:scroll;
background-color:#2d2e33;
height:100px;
overflow:hidden;
width:auto;
}
#linkerbalk {
background-color:#2d2e33;
height:100%;
width:250px;
float:left;
overflow:auto;
}
#login {
background-color:#2faaaf;
height:35px;
width:auto;
overflow:hidden;
}
#menuLinks {
height:auto;
width:auto;
overflow: hidden;
}
Following is one of the ways to achieve this:
I have wrapped your HTML with a container div and given it 100% - height of header i.e. 100px.
.container{
height:calc(100% - 100px)
}
Working fiddle here.
You need a wrapper.
<body>
<div id="wrapper">
<div class='top'>
</div>
<div class='mid'>
</div>
<div class='bot'>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body,
#wrapper {
height: 100%;
}
.top {
height: 20%;
}
.mid {
height: 70%;
}
.bot {
height: 10%;
}
Related
i have some div with height:100%, that have within this 3 divs: header, main, footer.
( here you can see an exemple: http://i61.tinypic.com/28mjpya.jpg )
in the 'main' div, i have a scroll, and i need this to be with height:100%
but when i do height:100% to the 'main' div, i cant see the 'footer' div.
and if i will do the 'footer' div with position:absulute; bottom:0px; it will hide my scroll bar of the 'main' div.
how can i solve this problem?
this is my source: http://jsfiddle.net/8YEJY/
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;'>
ccc
</div>
</div>
Instead of making the content div scroll you could place your header and footer fixed an let the body scroll:
HTML:
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%; /* needs to be set */
}
#header, #footer {
width: 100%;
height: 100px; /* needs to be a fixed width! */
position: fixed;
top 0;
background: lightgreen;
}
#footer {
bottom: 0;
}
#content {
width: 100%;
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
box-sizing: border-box; /* include the padding in the height */
-moz-box-sizing: border-box;
background: lightblue;
}
And a demo.
[EDIT based on your comment]
Change #content to:
#content {
width: 100%;
position: fixed;
top: 100px;
bottom: 100px;
overflow: auto;
background: lightblue;
}
Check the updated demo.
Note: instead of fixed positioning, you could also place #header, #content and #footer absolute, check this link. Result is the same though.
You can use position:absolute; on the #main and #footer like this :
FIDDLE
What I did to your code :
removed the inline styles and put them in a sperate stylesheet. This makes the code cleaner and inline styles are not recommended.
removed position:fixed; on the first container, it isn't needed for your layout.
removed unecessary css properties
changed the tags to HTML 5 tags
set html,body{height:100%;margin:0;} so the #wrap container can expand to the height of the window with height:100%; and position:relative;.
HTML :
<div id="wrap">
<header>aaa</header>
<main>bbb</main>
<footer>ccc</footer>
</div>
CSS :
html,body{
height:100%;
margin:0;
}
#wrap {
width:200px;
height:100%;
position:relative;
}
#header {
height:40px;
background-color:lime;
}
#main {
position:absolute;
width:100%;
top:40px;
bottom:30px;
overflow:scroll;
background-color:green;
}
#footer {
position:absolute;
width:100%;
bottom:0;
height:30px;
background-color:pink;
}
just add position:absolute and some bottom margin,I have added as bottom:0%;
This one works fine
<div style='position:fixed; left:0px; width:200px; height:100%;'>
<div id='hearer' style='width:100%; height:40px; background-color:lime;'>
aaa
</div>
<div id='main' style='width:100%; height:100%; overflow:scroll; background-color:green;'>
bbb
</div>
<div id='footer' style='width:100%; height:30px; background-color:pink;position:absolute;bottom:1%;'>
ccc
</div>
</div>
Currently I have a web page with a background image size of cover. I would like 2 divs inside of this div with 100% height. These divs need to be responsive. I need the leftside div to have an image to sit on the bottom. I am using clearfix on the main containers but the class pic still goes up to container 1.
HTML
<div class="main-container1 clearfix">
</div>
<div class="main-container2 clearfix">
<div class="wrapper">
<div class="leftside"><img class="pic" src="image/blank.png" /></div>
<div class="rightside"></div>
</div>
</div>
CSS
body {
height:100%;
overflow:scroll;
}
.main-container1 {
background-image:url(../images/footballfieldblur.jpg);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
min-height:100%;
}
.main-container2 {
background-image:url(../images/footballfieldblur.jpg);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
min-height:100%;
}
.wrapper {
width:90%;
margin:0 auto;
height:100%;
min-height:100%;
}
.leftside {
width:40%;
height:100%;
min-height:100%;
float:left;
position:relative;
}
.rightside {
width:60%;
height:100%;
min-height:100%;
float:right;
position:relative;
}
.pic {
position:absolute;
bottom:0;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Alright guys I figured it out. My divs were not expanding 100% height of my clearfix containers because the clearfix class was not 100% height.
.clearfix {
*zoom: 1;
height:100%;
min-height:100%;
}
I am expected result and the code are as following. My current style works but the problem is that the footer is too wide and and menu1.menu2,menu3 are not as illustrated blew,
Expected result
50% |LeftHeader middleHeader RightHeade| 50%
50% | Menu1 Menu2 Menu3 | 50%
50% |Content goes here ***********************************************| 50%
|*****************************************************************|
50% | text of Footer goes here | 50%
These lines >> | show the border sections for example footer is that big but its text should be in center.
My code is as following
<html>
<head>
<style>
#wrapper {
margin: 0 auto;
width:50%;
}
#header {
background-color:#faa;
height:50px;
font-size: 0;
}
#header > div {
display: inline-block;
width: 33.3333%;
font-size: 12pt;
height: 100%;
}
#left {
background-color:red;
height:20px;
}
#middle {
background-color:yellow;
height:20px;
}
#right {
background-color:green;
height:20px;
}
#menu {
width: 100%;
margin: 0 auto;
background-color:#faa;
height: 20px;
font-size: 0;
}
#menu > a {
display: inline-block;
font-size: 12pt;
width: 33.333%
}
#leftm {
text-align: right;
}
#content {
top:50px;
bottom:150px;
overflow:auto;
}
#footer {
bottom: 0;
width: 100%;
background-color:#afa;
height:150px;
position:fixed;
}
#footer > div {
margin-left: 50%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="left">
left header
</div>
<div id="middle">
middle
</div>
<div id="right">
right header
</div>
</div>
<div id="menu">
<div id="leftm">menu1</div>
menu2
menu3
</div>
<div id="content">
vbcfxbfgbfcgbfg
</div>
<div id="footer">
<div id="footertext">
And here's the footer
</div>
</div>
</div>
</body>
Result of my current code
50% |LeftHeader middleHeader RightHeade| 50%
50% |Menu1 Menu2 Menu3 | 50%
50% |Content goes here ***********************************************| 50%
|*****************************************************************|
50% | text of Footer goes here | 50%
See updated code here.
I've wrapped the menu links in another div: display: inline-block with the text-align of the #menu set to center. This centers the three links.
The text in the footer is also centered through text-align: center.
Firstly, it is bad practice to open a new question asking the same thing. Secondly, avoid announcing "My code" unless you wrote the majority of it (this is not the case here). Thirdly, this question does not show much research effort as the footer text-align can easily be searched up.
A few things:
You can size the footer and still use position:fixed at 50% as that's what the wrapper is.
You had a few unnecessary tags (if I understand what you want)
You were sizing your menu items by 33% when it seems like you didn't want that.
jsFiddle
HTML
<div id="wrapper">
<div id="header">
<div id="left">left header</div>
<div id="middle">middle</div>
<div id="right">right header</div>
</div>
<div id="menu">
menu1
menu2
menu3
</div>
<div id="content">vbcfxbfgbfcgbfg</div>
<div id="footer">
And here's the footer
</div>
</div>
CSS
#wrapper {
margin: 0 auto;
width:50%;
}
#header {
background-color:#faa;
height:50px;
font-size: 0;
}
#header > div {
display: inline-block;
width: 33.3333%;
font-size: 12pt;
height: 100%;
}
#left {
background-color:red;
height:20px;
}
#middle {
background-color:yellow;
height:20px;
}
#right {
background-color:green;
height:20px;
}
#menu {
width: 100%;
margin: 0 auto;
background-color:#faa;
height: 20px;
font-size: 0;
text-align:center;
}
#menu > a {
display: inline-block;
font-size: 12pt;
margin:0 .5em;
}
#content {
top:50px;
bottom:150px;
overflow:auto;
}
#footer {
bottom: 0;
width: 50%;
background-color:#afa;
height:150px;
position:fixed;
text-align:center;
}
I'm confused by the goal. Does the footer need to be fixed? If yes, see example 2. Does the wrapper need to be height 100%?
Example 1:
FIDDLE
Example 2:
To fix the footer to the bottom of the window, add this to the footer:
width:50%;
position:fixed;
bottom:0;
left:50%;
margin-left:-25%;
I want to make my inner div 100% width of the body, not 100% of the parent div. Is this possible?
The layout looks like this:
<body>
<div> /** Width:900px; **/
<div> /** This I want 100% of BODY, not of parent div **/
</div>
</div>
</body>
i hope you are looking like this........... see the DEMO
UPDATED DEMO 2 AS PER YOUR CURRENT REQUIREMENTS
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
position:absolute;
left:0;
right:0;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
-------------**
Second Answer with without positioning but with a some trick what i used here so please check it the code & demo mentioned below :-
HTML
<body>
<div class="parent"> /** Width:900px; **/
<div class="child"></div>
</div>
<div class="inner"> /** This I want 100% of BODY, not of parent div **/</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
DEMO
you can use vh an vw units
.parent {
width: 900px;
height: 400px;
background-color: red;
}
.child {
width: 100vw;
height: 200px;
background-color: blue;
}
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
try this:
.inner {
margin-left: -50vw;
left: 50%;
position: fixed;
height: 100vw;
width: 100vw;
top: 0;
}
.outer {
width: 900px;
/* your outer div style*/
}
<body>
<div class="outer"> /** Width:900px; **/
<div class="inner"> /** This 100% of BODY, not of parent div **/
</div>
</div>
</body>
Consider changing your layoiut to something like the following:
http://jsfiddle.net/KpTHz/
Then you can just apply ID tags to DIVs you want to apply specific rules to.
<div class="outer">
<div class="inner">HEADER</div>
</div>
<div class="outer">
<div class="inner">CONTENT</div>
</div>
<div class="outer">
<div class="inner">FOOTER</div>
</div>
.outer {
width:100%;
background:#ccc;
}
.inner {
width:920px;
background:#999;
margin:0 auto 20px;
padding:20px;
}
I think what you are asking for isn't possible. Instead you should consider rethinking your layout. I often find myself doing stuff like this:
html:
<div id="top">
<div class="wrapper"></div>
</div>
<div id="content">
<div class="wrapper"></div>
</div>
<div id="footer">
<div class="wrapper"></div>
</div>
css:
#top {
background: red;
}
#content {
background: orange;
}
#footer {
background: yellow;
}
.wrapper {
width: 860px;
margin: 0 auto;
padding: 20px;
background: rgba(255, 255, 255, 0.2);
}
demo - http://jsfiddle.net/bxGH2/
This made the trick. A jQuery script:
$(document).ready(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
$(window).resize(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
Overriding the min-width ( min-width:100% ) stopped the container from growing to the size of the contents.
Details:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset informs:
"Unlike almost any other element, the WHATWG HTML Rendering spec suggests
min-width: min-content
as part of the default style for , and many browsers implement such styling (or something that approximates it)."
how to set three div arranged horizontally like this?
The left one width:150px, the right one width:150px, the center one width are the rest of the pixels, and the center one min-width will be 800px. All the div need a position:relative.
Thanks.
Here we go, html is below:
<div id="wrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clearBoth"></div>
</div>
and now css below:
#wrap {
width: auto;
position: relative;
}
.left, .right {
width: 150px; //or use 30%
float: left;
}
.center {
float: left;
min-width: 800px; //or use 60%
width: auto;
position: relative;
}
.clearBoth {
clear: both;
}
Use a wrap if you want to define a fixed maximum width.
.wrap {
overflow:hidden;
width:1200px; /* Optional */
}
.left {
float:left;
width:150px;
}
.middle {
float:left;
min-width:800px;
}
.right {
float:left;
width:150px;
}
<div class="wrap">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>