I'm tearing my hair apart here. Does anyone know how i can get a div to fill the screen both horizontal and vertical? I can make it fill it horizontal but it just refuses to fill vertical unless a specify the width in pixels. What am I doing wrong?
This is what I want to accomplish, without have to scroll to get the bottom-padding:
Thank you!
HTML:
<div id="main">
<div class="main_content"></div>
</div>
CSS:
#main {
margin-left:auto;
margin-right:auto;
height:100%;
width:auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:40px;
}
.main_content {
width:auto;
height:100%;
background:#fff;
}
When you set a percentage height it is related to its container, that must have an explicit height. If you set height: auto, the container will take the height of its content. The parent of the div must have an explicit height property, you can set in 'px' or in 'em'. You can also set in 'vh'
you can add height:100vh;
Demo : http://jsfiddle.net/6yLhk17h/
Add the below code in your style sheet.
html{
height: 100%;
}
Related
I have a dashboard left, and need that dashboard to be in the same size of the page, everytime it needs to get bigger i want to apply the scroll, at the moment i am doing something like this:
style="overflow-y: scroll; height:450px;"
this is applied to all my section, the thing here is that i set the height a value, i tried with height auto and 100%, but without success, any help with this?
my page is getting bigger because of that dashboard if i cant mantain the page size and give it a scroll it would help a lot
Thanks
you can try to set the min-height:100%
Is something like this appropriate.
body{
padding:0;
margin:0;
}
.a{
display:block;
position:absolute;
top:0;
left:0;
width: 20%;
height:100vw;
overflow:auto;
background-color:purple;
padding:0;
margin:0}
.b{display:block;
width:80%;
background-color:pink;
padding:0;
margin-left:20%;
min-height:100vw}
<div class="a">
</div>
<div class="b">
content
</div>
Use height: 100vh; // viewport height
Check compatibility here
http://www.caniuse.com/#search=vh
And if you want to support old browsers calculate "$(window).height()" and assign it to this div
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I got headache how to make my fluid content will float to right.
left sidebar is fixed size.
right content is fluid size.
Here and example my html and css
How to make my id="content" will float on right?
Set a margin and remove the float/width on #content, like so:
HTML:
<div id="wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
CSS:
#wrapper {
width:400px;
overflow:hidden;
padding:10px;
}
#sidebar {
float:left;
width:100px;
}
#content {
margin: 0 0 0 100px;
}
div {
border:1px solid #333;
}
http://jsfiddle.net/HWMJc/1/
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.
http://jsfiddle.net/HWMJc/874/
#sidebar {
float:left;
width:100px;
}
#content {
overflow:hidden;
}
You should set it to be:
sidebar{ width:100px; float: left}
Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.
I have a setup that looks like this:
<html><head><style>
table{
height:100%;
width:100%;
padding:0 20px 20px 20px;
min-height:540px;
min-width:720px;
}
tr.head{
height:35px;
background:black;
}
td.left-bar{
background-color:green;
width:220px;
}
td.spacer{
width:10px;
}
td.right-bar{
background-color:blue;
}
div.sb-top{
height:20px;
background-color:red;
}
div.sb-bottom{
height:100%;
background-color:yellow;
padding:10px;
}
</style></head><body>
<table>
<tr class="head"><td colspan='3'></tr>
<tr>
<td class="left-bar"><div class="sb-top"></div><div class="sb-bottom"></div></td>
<td class="spacer"></td><td class="right-bar"></td>
</tr>
</table>
</body></html>
However, when I do this both the height and padding on sb_bottom cause it to overflow past the cell. I'm not so concerned about the right/left overflow, but I absolutely must fix the bottom overflow. How can I do this? Thank you!
You could always put an inner wrap inside of sb_bottom and give that the padding. That way it won't overflow.
How about moving the padding to the body instead of the table?
If that does not work, you can put the table in a div and give the div the appropriate margins instead of a padding.
get rid of your height and width 100% requirements... it will spread on its own. also, your min-heights and widths may be playing factors here... you can get rid of those too
This is probably just a hack, but I added padding-bottom to the left-bar and it looks okay.
td.left-bar{
background-color:green;
width:220px;
padding-bottom:40px;
}
I loaded up the sb-bottom div with text and it scrolled off the screen, but I wasn't sure if you wanted the height to be fixed or to be scrollable.
All you need is box-sizing: border-box; on div.sb-bottom.
This would make sure height:100% includes the padding as well in the parent content height. Otherwise, actual height or the div will be height of the parent + padding which will always go beyond the parent content height.