Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've tried this seven ways from sunday and I keep coming up short.
Bands of color or what have you that extend to the limits of the visible page seem to be a very common request in internet forums / blogs, however for each of the two main scenarios I'm running into equally frustrating issues that render either solution untenable. In my frustration I've turned here.
HTML
<body>
<div class="container"></div>
<div class="content-container">
<div class="content">
Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good.
</div>
</div>
<div class="container"></div>
Scenario 1
You set a container div at width: 100% and then a child div at a fixed width and margin: 0 auto; this effectively extends that div to the ends of the visibel screen at all times.
html, body {
width: 100%;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 auto;
}
.content-container {
height: 100px;
margin: 0 auto;
}
.content {
width: 300px;
}
Scenario 1 issue
When the screen is resized so that the child div's fixed width is too big for the window a scroll bar appears. This is absolutely fine and desired, however when you use the scroll bar the extended bands of color only extend as far as 100% of the visible window.
Fiddle 1 (you need to resize the browser window to surpase the size of the fixed width content div and then use the scroll bar, you'll see the blue bands do not extend past 100% of the window size.)
https://jsfiddle.net/b1dht69u/2/
Scenario 2
You set the overflow-x: hidden on the body and then run a very high negative margin, with a corresponding positive padding.
body {
overflow-x: hidden;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 -9999px;
padding: 0 9999px;
}
.content-container {
height: 100px;
margin: 0 -9999px;
padding: 0 9999px;
}
.content {
width: 300px;
}
This is absolutely great until again you try to resize the screen.
Scenario 2 issue
When you resize past the size of a child div's fixed width no scroll bar appears.
Fiddle 2
https://jsfiddle.net/mnodvLvg/1/
What I am looking for is the best of both worlds. I am hoping to have a bar of color that extends to the ends of the visible page at all times, yet when a browser is resized past an inner divs fixed width a scroll bar appears.
This is a curious problem, and one that I never gave much thought since I mainly work with responsive layouts.
However, there is a nice article by Nicholas Cerminara about dealing with fixed-width layout issues.
The key to this is setting a min-width on body{} and/or html{} in your CSS.
Interestingly, Stack Overflow uses this technique to prevent their top navigation bar from breaking when you resize the window. Just open your web browser DOM explorer on this website and disable the following style rules:
body{min-width:1030px;} and html{min-width:1000px;}
You will see the top nav bar break its layout and have the same issue you are experiencing.
this scenario 2 with 9999px stuff is actually very dirty, forget it.
If you inspect the div, you'll see that the problem doesn't come from the div.container itself but from the body.
I would solve this with:
html, body {
position: absolute;
min-width: 100%;
width: auto;
}
As a reminder, don't forget that the ID must be unique. Better use class in this case.
An other idea could be to forget those .container DIVs and actually make borders for .content-container, but I don't know what you exactly would like to do.
#content-container {
height: 100px;
margin: 0 auto;
border-top: 20px solid #377ab7;
border-bottom: 20px solid #377ab7;
}
Good Luck' !
If you have a fixed width for the content div, you may as well set a min-width of the same value or larger on the body tag. This will guarantee it can't be smaller than your content.
html, body {
width: 100%;
min-width: 300px;
margin: 0;
}
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I don't quite understand why the footer (and the header) doesn't take up all the space?
I divide the <body> part in 3 sections: 1) div header, 2) div wrapper, 3) div footer (so that I could control each part separately).
Div wrapper (which is supposed to be narrow)
.wrapper {
display: block;
width: 100%;
max-width: 980px;
margin: 20px auto;
padding: 20px;
border: 1px solid black;}
Div footer (which is supposed to be 100% wide on the screen)
.footer {
margin: 0px;
padding: 0px;
background-color: black;
height: 200px;
color: orange;
width: 100%;}
How can I make it cover all the space (like on this website, the header takes all the space, but the main content part is way more narrow).
Thank you in advance!
The footer (which is black) doesnt take up all the space and leaves some background
The footer (which is black) doesnt take up all the space and leaves some background
Seems like you didn't reset the default margin for body which most browsers add by default. To do so, add this:
body {
margin:0;
}
There's more than one way to solve this and there's more than one reason for which the problem could be generated in the first place, so don't tread if different people give you different answers :)
The problem I most usually see when this comes up is generated by a father element not having full width, or having a padding that's bigger than zero. (Probably the body.)
If that's not where the problem lies, then try with these media queries (One at a time).
width: -webkit-fill-available;
width: 100vw
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I’m trying to redesign my website to keep the header at the top of the screen and let the rest of the page scroll beneath it. I did some research and found a nice JSfiddle that explained what I needed to do: http://jsfiddle.net/austinbv/2KTFG
#header {
position: fixed;
top: 0px;
height: 20px;
width: 100%;
background: green;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }
<div id='header'>hello</div>
<div id='body'>skdfl</div>
I added the 2 DIVs to a Dreamweaver template and then the CSS. I then broke my page up into 2 portions and placed each in the corresponding DIV. Now when I view the page in the browser, the bottom div refuses to extend far enough to show the contents within. it stops at the bottom of the screen, not the bottom of the contents. See the example at http://www.rcda.org:81/index2.html
I researched the net and found people saying that the contents of the DIV are somehow floated and above the div causing the div to not expand. I did not float the contents.
What can I do to get body div to expand to the height of its contents?
On your div#body (random div..), you have overflow:hidden- with a fixed height, this is hiding anything below the fixed height.
Take off overflow: hidden; on the body css in index2.html
#body {
margin-left: auto;
margin-right: auto;
margin-top: 203px;
}
In my website, some pages are having contents that exactly fit in the screen and some pages having scrolling content. All the pages are having, same html structure.
<body>
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
#header {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #EDEDED;
height: 172px;
margin: 0 auto;
overflow: hidden;
padding-top: 2px;
width: 900px;
}
#contentArea {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding: 0 0 25px;
text-align: left;
width: 900px;
}
#footer {
border-top: 1px dashed #CCCCCC;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}
When i move to different pages, in some pages the scroll bar appears due to the content, at that time it looks like the whole webpage moved towards left side for some 20px.
How to make the <body> to adjust itself when the scroll bar appears?
Thanks!
The simplest trick is to always display a scroll bar. This is what HTML5 Boilerplate does:
html { overflow-y: scroll; }
if this doesn't fit your needs you will have to use JavaScript. On page load, detect, if body's height is larger than window's height and if not, move #header, #content and #footer to the left, e.g. via padding, or via margin on the body.
However, you have no simple means to find out, how wide the scrollbars themselves are. This, too, needs a detection via Javascript. (Basically: Create an element -> make it's content scrolling -> see how the content width changes.)
i belive you should specify WIDTH css attribute for BODY class:
body {
width:100%;
}
<body style="height:100%; width:100%; overflow:auto;">
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
Here is a jsfiddle link: http://jsfiddle.net/NGWgz/2/
Without fully testing, I suspect the reason you're seeing this is because you have an absolute width of 900px defined for the various elements that appear in the body of the page.
When the scrollbar appears, that's then eating into your screen real estate, and so the content shifts to maintain its 900px width. I would move to a more fluid sizing model, or at least wrap the content in a container of some sort, so that the scrollbar doesn't interfere with it.
The easiest way for me to do this is to use the min-height and max-height properties, that way you will not have to use the Overflow element and therefore the content will not move.
min-height: ... px/em/%
max-height: ... px/em/%
So you will write in your case:
min-height: the original height that you wanted in pixels, percentage or ems;
max-height: auto;
This way it doesn't matter how much content you put inside your box/wrapper/div , it will make the page height bigger without having to change it every time you add something to your page.
You also have the same properties for width but I have not try them.
My sources:
1-I am making a web page and studying software engineering at SB
2-http://www.w3schools.com/cssref/pr_dim_max-height.asp
PS: I know this is already solved, but I think it might be useful for someone else when they are working on their web pages.
I have spent hours looking for a solution and cannot find anything on this particular issue, so please forgive me if it has been answered.
I have a standard CSS page with a masthead, a navigation row, a left column for links, a right column for contents and a footer.
I have set everything to the center of the page at 1024px wide.
What I just cannot achieve is to have the 2 columns stay at the same height when one has longer content than the other.
Let me explain this - both columns have a 1px border that I would like to extend all the way down to the footer. The right column has much longer content so it reaches the footer very quickly but the left column doesn't so the border stops, where the links finish.
To fix this problem I have set the heights to 100% in the html, body, container and the two columns as follows:
html {
height: 100%;
}
body {
height: 100%;
}
#masthead {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#top_nav {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#container {
width: 1024px;
height:100%;
margin-left:auto; margin-right:auto;
}
#left_col {
width: 198px;
float: Left;
height: 100%;
border: 1px solid #FF0000;
}
#page_content {
margin-left: 200px;
width: 824px;
height: 100%;
border: 1px solid #000000;
}
#footer {
bottom: 0px;
clear: both;
width: 1024px;
height: 50px;
margin-left:auto; margin-right:auto;
border: 1px solid #000060;
}
This works BUT now the content of the right column (which is much longer) goes way past the footer? and no matter what I try I cannot fix this without affecting the left column's border i.e. I can use min-height: 100%; which fixes the overflow and footer problem, BUT this has the side effect of capping the border on the left column back to the Navigation link's height i.e. so the border no longer flows to the bottom of the left column and down to the footer (grrrhhh!)
Here is a link to the page itself which you can copy and paste into DW or EW etc. to see what's going on:
http://www.iifuture.org/downloads/testzzz.html
If anyone knows how to fix this paradox I'd love to know about it!
Thanks
Shaun
Actually scratch that : remove the height:100% on the container, left col and page content. That's it.
Edit(revised answer after discussions)
This article helps.
style="background: blue url(someimage.png) repeat-y left;"
Add the above style to container. This is a hack, the DIV doesn't grow but the background image covers it up to get the layout you want!
Please refer this question and answer selected to learn more.
Original answer
Please take a look at overflow property. I was able to get your example page working with the below style added to page_content DIV.
position:absolute;overflow:auto;
With this code the scrollbars appear if the content exceed the height set. If you do not want to get the scrollbars and are okay with not showing the data beyond the DIV height, just use hidden instead of auto. Likewise, to display the scrollbars at all times, you may use scroll.
The last option visible will make it *(mis)*behave the way it is behaving right now i.e. letting the data grow beyond the DIV height. Notice that the DIV is not growing, only the content is.
I am using the following bits of code to keep my menu items fixed while allowing for the scrolling of content because it seems to be the most stable method across all browsers.
body { overflow: hidden; }
div.content { height: 100%; overflow: auto; }
My problem is simple, and yet I can not seem to figure it out, the content inside the tag butts up against the scrollbar for the div area and it makes reading much more difficult. How can I get a margin between them (apart from floating a transparent image to the right to create space, there HAS to be a better way)?
div.content { height: 100%; overflow: auto; margin:0 15px }
I might have misunderstood you though, post some HTML if I have.