Is it possible to have 100% height but have the div fill out the entire page only.
So if i put 100% height on a div, it should extend the div all the way down to the end of the page but not extend anymore to bring any scroll bars. Is that possible? I know height:100% takes the page's height and puts the div's height to that number but I don't want the div to actually have the height of that number, but only extend till end of page, no more than that.
Is it possible with 100% height or anything else?
I appreciate your help.
Thanks
you can use
<div style="top:0;bottom:0,left:0,right:0;"></div>
or using jquery:
$("#mydiv").height($(window).height());
Without padding or border, if you declare the html, body, and div 100%, it will extend to the size of the browser window.
If you want to use padding and border, consider using the CSS3 property box-sizing: border-box;
Demo
Update:
Using pseudo-elements (you could use an empty div):
.top{height:100px; width:100%; position:absolute; top:0; left:0;}
.rest{min-height:100%; background:lightblue; }
.rest:before{content:''; display:block; width:100%; height:100px;}
Demo
Related
I am developing a configuration page for my plugin in WordPress. I created an <ul> element inside a <div> element and placed it on my config page. The problem is, whenever I apply margin-right and width:100% to that div it causes the scroll bar to appear, the width of the list exceeds the total width of the page. As you can see at the bottom of the screenshot.
Here are the only styles I am applying (LESS):
div#pworks-popular-posts-list {
display:block;
margin:20px;
width:100%;
ul {
width:100%;
margin:0;
background-color:white;
li {
display:block;
div {
display:inline-block;
}
}
}
}
This is the HTML structure pulled from Chrome Dev Tools:
Could you please help me with this? Thank you.
First of all you don't need width:100%; because a display:block; div will fill its parent's width by default. But if you want to specify it for some reason (or you plan on making it display:inline-block; or something) you can use calc() function like this: width:calc(100% - 20px);.
What's happening is that you are setting the div's width to be the body's width. After that you are moving it so it causes your div to go even further and that causes an overflow-X.
I wouldn't recommend setting a block element width to 100%. Block elements automatically have 100% width of their parents.
I would set a container div with a padding: 20px; instead.
Set max-width:100% instead width:100%.
It will reduce width according to padding.
Alrighty,
I'm going to try to explain what I have going on. Let me know if you need more information.
Basically, I have a div container, and I have it styled at height:100%; It will do 100% but it will only be 100% for the current browser/window size.
For example: if I maximize the browser, the container will do 100%, but if I scroll down, that container's height only goes as much as whatever the browser height was.
Another example: if I minimize the browser to a certain size and refresh the page, the container will go 100% again to the window size only. So if I maximize the browser, the height container will still be the same height has if the browser was minimize.
So if I have a long page, the container doesn't go all the way down to the page, the container only goes so far as the window's height size when the page loads.
I'm trying to get the container to go all the way 100% till the bottom of the page, even if I have a footer or header, the container should be 100% between the two.
So I'll try to post up the most relevant code:
body,html
{
display:block;
position:relative;
}
#container_100percent
{
overflow-x:hidden;
position:relative;
overflow-y:auto;
width:20%;
min-height:100%;
height:100%;
float:right;
}
<div>
<div id="container_100percent">
<!-- some stuff !-->
</div>
</div>
The height of 100% is the height of his parent.
This means: if the parent div-container has no height, the height will be set to 100%, too and same for body. This is why your div has the height of your window.
So you need to give your div wrapper a height and the inner div will take on this height.
If you want the container to be as high as its contents, don't set the height property. It's as simple as that.
If, however, you want it to have a minimum height (i.e. you never want to let it be less high than the window) set the min-height property.
Here's an Illustration of what I need.
On the left a fixed div and on the right a horizontally scrolling div that is something like 12000px. I need the right div to center vertically in the window when it is re-sized. I can't get the usual tags I use (position:relative and margin:auto) to work on this. I assume it's because the div overflows on the sides of the screen?
This interface should accomplish what your mockup shows. Thanks.
http://jsfiddle.net/9tV4y/2/
I'm not at all good at laying out pages, but this CSS is what you want for the left, horizontally scrolled, div,
.horizontal_scroll{
float:left;
overflow:auto;
white-space: nowrap;
width : 500px;
height : 500px;
}
and applied to the div,
<div class="horizontal_scroll"> ... </div>
Both the width and height are percentage-based (although you can change either to any other type of length that you would like). If you change the width of the left column, be sure to change the left of the right column to be the same. The vertical positioning is done with the top:0;bottom:0;margin:auto 0;height:70%;. Positioning, top/bottom margin, and height must all be set in order for it to work.
Here's the jsFiddle Demo.
HTML
<div id="lc"></div>
<div id="rc">Here's some text that does not wrap. This would be replaced with images, of course.</div>
CSS
<style>
html, body {height:100%;}
#lc {position:fixed; top:0px; left:0px; width:20%; height:100%; background:lime;}
#rc {background:red; height:75%; position:fixed; left:20%;right:0;top:0; bottom:0;margin:auto 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;}
</style>
Note: Be sure to set the height of all elements from html to #lc/#rc's parent nodes to 100%.
I need to make a div have a certain height, it has a repeating image in it and I want it to take up the entire screen no matter what the users screen resolution is. Height auto depends on the content so do I need to use javascript in order to achieve my goal? Or can I use something with a "clear:both;" property on it in order to always stretch the div to the bottom? I would really like to avoid javascript.
As long as the parent container (like body or html) has 100% height, then the div should also. So
html, body{
height:100%;
}
div{
height:100%;
width:100%;
border:1px solid red;
}
Example: http://jsfiddle.net/jasongennaro/Jm8Mt/
Of course, your div would have a class... example was just for show
Giving the div 100% height and width will make it take up the entire of the window.
#fullscreen {
height:100%;
width:100%;
}
I have html like this:
<div id='content'>
<div id='first'>...</div>
<div id='second'>...</div>
</div>
#content
{
width:100%;
position:relative;
padding:20px;
}
#first
{
width:70%;
position:relative;
}
#second
{
width:70%;
position:fixed;
}
this causes the second div to be a bit wider (40px to be exact) than the first div, because the first div's 70% is with respect to the content's width (which is 100% minus the padding of 20px on each side).
What does the second div's 70% refer to? How could I make it so that the two divs are the same width?
The first div's 70% refers to 70% of the width of #content.
The second div's 70% refers to 70% of the width of the viewport.
If you add this CSS, the two div's are the same width:
html, body {
margin:0; padding:0
}
Live Demo
According to the CSS 2.1 Positioning Scheme spec:
In the case of handheld, projection,
screen, tty, and tv media types, the
box is fixed with respect to the
viewport...
This leads me to believe that the 70% you're setting is actually 70% of the viewport.
As far as making it the same width as the other div, perhaps you could use JavaScript (or specify widths explicitly).
This weird behavior (great question!!) can be referred about the fact that the relative div (first) take the width looking at his father. The second one just look at the viewport, no matter who is its father (and what width is set to its father)!
This can fix your problem:
body,html{
padding:0;
}
Edit -> Fiddle
I set an absolute width using javascript to detect the computed width of #first.