I have the following issue with css and was wondering whether there is a way to solve it by setting an absolute height value. The code I have is as follows,
<style type="text/css" media="screen">
html { height:100%; }
body { background: black; height:100%; }
#menud {
position:absolute;
padding:1em;
height:300px;
background-color:#eaeaea;
width:184px;
}
#menue {
position:absolute;
margin-top:300px;
padding:1em;
height:900px;
width:184px;
background-color:red;
}
#data {
position:absolute;
margin-top:0px;
margin-left: 184px;
width:630px;
height:600px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#ad {
position:absolute;
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
#content {
width:1000px;
background-color:white;
height:100%;
}
#info {
margin-top:0px;
width:1000px;
}
</style>
<html>
<body>
<div id='content'>
<div id='info'>
<div id='menua'>test</div>
<div id='menub'>test</div>
<div id='data'>test</div>
<div id='ad'>test</div>
</div>
</div>
</body>
</html>
I have set the height property to 100% but this does not cover the whole background white as one would expect it to. Any help on this would be appreciated.
Thanx.
Setting the height to 100% means 100% of the current viewport height. If your page is longer than the browser viewport, the div is too short. Use auto height to let the height get calculated correctly for you.
Set the height of content back to auto (remove height: 100%):
#content {
width:1000px;
background-color:white;
}
and remove the position: absolute from your ad (or replace with position: relative), so that the ad's height is respected when calculating the parent's (#content's) height:
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
now your content is as long as you would expect.
100% height is relative to the container. To cover the whole background, you will have to use javascript. On page load you set the height to the window height.
You can use jQuery, to do this: in that case
$("#content").css('height', $(window).height());
You might have to remove paddings and margins from the body, like body { margin: 0; padding: 0; }, for the relative-positioned container div to cover the whole height.
Related
My html is :
<div id="outer">
<header><h1>The Header</h1></header>
<div id="contenttab">
<table>
blablabla
</table>
</div>
</div>
My CSS :
#outer{
height:70%;
width:900px;
left:50%;
margin:0 auto;
position:absolute;
top:20px;
z-index:1001;
transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
header{
background-color:#f6f7f9;
padding:10px;
font-size:15px !important;
font-weight:bold !important;
text-align:center;
width:100%;
}
#contenttab{
height:100%;
overflow-y:auto;
}
why my contenttab exceeded the height of #outer div ? how to fix that? I have try adding border-box css to parent div but not solve my problem . . .
I just tried out your posted html/css and your #contenttab div is exceeding the height of it's container because of your css rule of height: 100% on the #contenttab;
It's a lot easier to see/debug the issue using borders on your elements, add the following:
#outer {
border: 1px solid #000;
}
#contenttab {
height: 100%;
overflow-y: auto;
border: 1px solid #ffa500;
}
You are telling the #contenttab to have 100% full height of it's container, however then you are also adding additional content(the header element) which causes the internal elements to have more than 100% height than it's container can hold.
Either change the height rule on the #contenttab to auto or less than 100%. Or add css rule overflow: hidden(or auto) to your #outer css rule.
I have the following html:
<body>
<div id="page">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
and css:
html,body {
margin:0;
padding:0;
height:100%;
}
#page {
height:100%;
margin:auto;
left:0;
right:0;
width:500px;
}
#header {
height:100px;
width:500px;
}
#content {
width:500px;
height:100%;
}
The problem is that content div is the height of the window + the height of the header.
How can i make it to be the height of the window - the height of the header, I mean to stretch horizontally all over the remaining window. ??
In case you don't need to support IE7 and below - you can use a useful trick with
position: absolute
for #header and
padding-top: 100px;
box-sizing: border-box;
for #content.
Check out this fiddle: http://jsfiddle.net/Jx4sC/2/
Details regarding box-sizing support: http://caniuse.com/#feat=css3-boxsizing
You could use calc() in modern browsers and let the browser calculate the height of your content box:
#content {
width:500px;
height: calc(100% - 100px);
}
Similarly you could use some JavaScript to do the same. But then make sure to update your calculations each time the browser height gets changed.
This is supprisingly hacky to get going and you may not have to do it. for example, say you wanted to give #content a background-color, put it on #page instead.
html,body {
margin:0;
padding:0;
/* body should have height:100% by default */
}
#page {
height:100%;
margin: 0 auto;
width:500px;
/* use page as you would have used #content*/
}
#header {
height:100px;
}
#content {
}
edit: but if you really need to do this, you can do it like so
#page {
position: relative;
}
#content{
position: absolute;
top: 100px;
bottom: 0px;
left: 0px;
right: 0px;
}
this is not ideal because if you wanted to make #header bigger you need to remember to update #content, you can no longer use the normal page layout
I have a DIV menu that is set to 100% height with a overflow:scroll. Within the DIV I have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.
I think it has something to do with my header because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.
Both li and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.
Why cant I scroll all the way to the bottom? What is the solution?
Sample here: http://jsfiddle.net/D5KU3/2/
<div class="container">
<!--header-->
<div class="header">
</div>
<!--end header-->
<!--left-->
<div class="left">
<!--ul starts here-->
<ul>
<li class="hybrid">
<a href="#">
<p class="title">Why Cant</p>
<p class="type">I scroll all the way to the bottom</p></a>
</li>
Repeat li 20 times
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
body, html {
height:100%;
}
body {
background:white;
}
.container {
width:260px;
height:100%;
overflow:hidden;
background:silver;
margin:0 auto;
font-family:sintony;
}
.header {
width:100%;
height:60px;
background:#000;
}
.left {
width:260px;
height:100%;
background:#fff;
float:left;
overflow:scroll;
}
li.hybrid a {
display:block;
background:#16BF14;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
li.purple a {
display:block;
background:#3370CC;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
p.title {
position:relative;
padding-left:10px;
}
p.type {
font-size:12px;
position:relative;
padding-left:10px;
}
ul {
margin:0;
padding:0;
}
li p {
margin:0;
padding:0;
list-style-type:none;
}
As you have both the class="header" and class="left" elements in the container, and the class="left" element is 100% of the container, those are 100% plus 60 pixels together.
You can make room for the header by using box-sizing and padding-top in the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:
.container {
box-sizing: padding-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: padding-box;
padding-top: 60px;
}
.header {
margin-top: -60px;
}
Demo: http://jsfiddle.net/Guffa/D5KU3/11/
You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:
body {
margin: 0;
padding: 0;
}
It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.
If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.
An updates jsfiddle: http://jsfiddle.net/D5KU3/3/
Remove the overflow: hidden; from .container class
.container {
width:260px;
height:100%;
background:silver;
margin:0 auto;
font-family:sintony;
}
http://jsfiddle.net/atYpX/
i would recommend following
.left {
position:absolute;
width:260px;
top:60px;
height:100%;
background:#fff;
overflow:scroll;
}
http://jsfiddle.net/D5KU3/8/
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
I have set up a jfiddle example, and it seems like my height:100%; is not working.
body, html
{
height:100%;
}
#full-wrap {
min-height:100%;
height: auto !important;
height:100%;
margin:0 0 -91px; /* 1 extra px from footer border */
clear:both;
border:thin solid red;
}
.contentCenter {
min-height:100%;
height:100%;
width:300px;
margin: 0 auto;
clear:both;
border:thin solid blue;
}
.footer {
height:90px;width:100%;
border-top:1px #E8E8E8 solid;
clear:both;
}
<div id='full-wrap'>
<div class='contentCenter'>
</div>
</div>
<div class='footer'>
</div>
Can someone help me with the problem? as you can see that the border line (blue) is not going 100%.
height: auto !important;
Remove that line and it works.
The height of your parent #full-wrap div is set to height:auto, you need to specify a height in order for your child div to expand 100%, so set it to 100% or a fixed height. Remember, percentage-based height is relative to its container.