I want to have a full header, while a fixed width of the content in the center of the page. Here's my code:
HTML:
<body>
<div class="header">
<div class="wrap">Header</div>
</div>
<div class="content">
content
</div>
</body>
CSS:
.header{
background:yellow;
}
.wrap, .content{
border:1px solid red;
margin:0 auto;
width:500px;
}
I've used .wrap inside the .header so that the content in the header also has same width as the .content.
Problem:
The layout looks fine, however the problem starts when the width of the browser window gets less than the width of the wrap (ie. 500px). In that case when we scroll the page towards the right side, some part of header background goes missing.
JSFiddle:
Here you can see the jsfiddle (http://jsfiddle.net/QS3nS/1/). You can see the problem if you decrease the browser width so that it the width of output window becomes less than 500px.
Set a min width on the header
.header{
background:yellow;
min-width: 500px;
}
Related
Please see this pen in Chrome: codepen example
html:
<div class='flexbox'>
<div class='static'>ddd
</div>
<div class='flex'>
<div class='flex-child'>
<div class='container'>
*** very long text here *** ...</div>
</div>
<div class='flex-child'>hhh
</div>
<div class='flex-child'>hhh
</div>
</div>
<div class='static'>ddd
</div>
</div>
css:
html,body{
margin:0;
padding:0;
overflow:hidden;
}
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
display:flex;
position : relative;
}
.flex-child{
background:red;
width:100%;
display:block;
color:white;
position : relative;
}
.static{
background:transparent;
width:100%;
color:yellow;
}
.container{
position : relative;
background:magenta;
height:100%;
}
I believe the example is almost selfexplanatory.
The question is: How to do it, to have the .container div ready to host any kind of content, unknown at the moment, and not to overlap over the footer.
try to remove background colors. the text from .container is visually mixed with the text of the .static footer. How to arrange it and have the .content div and its text not to overlap the footer?
edit:
The footer should be at the bottom of the viewport.
No explicit sizes or dimensions are allowed to be set in css.
Please take my question as an example, an experiment.
My concern is not to use any explicit sizes or dimensions e.g. header height 50px, I want to have the layout as general as possible. so if I formulated my question in other words:
pls in my original codepen delete all the text from the .container and then check the .container height via developer tools. It will be 0, but I would expect it to be the same height as it's parent .flex-child is.
I know that it probably would not be following the specification, but how to achieve this?
edit 2:
I described my problem in more detail in another question, with codepen and picture. Thank you for your ideas. https://stackoverflow.com/questions/32114925/header-flexible-body-with-nested-flexible-columns-footer-concrete-layout
thank you
Your actual requirements are a little unclear as to the actual position of the footer.
Option 1.
The footer should be at the bottom of the viewport and so the whole page must be contained within the viewport.
In this case the content of the main element can be any size and a scrollbar is added when content will overflow the height of the element.
Codepen Demo
Option 2.
The footer should be at the bottom of the page/document and the page can be any height (presumably with a minimum of the viewport height).
In this case the content of the main element can be any size and the page/dicument will increase in size to accomodate it
Codepen Demo
I am trying to build a web site layout with header, content and footer.
Both header and footer should expand to 100% width. And they do. But when I put a very wide element inside content div, header and footer stay at width of my screen and do not expand further to match content width. Please help to achieve such behaviour.
In my example below, I would like blue header and yellow footer to expand and match width of gray content (which in real life will contain a table with unknown width)
jsfiddle: http://jsfiddle.net/StormBlast/z4hegp1o/3/
HTML:
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div style="width: 2500px; background-color: gray;">
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
here comes very wide table with some results and expands beyond screen borders (in width)
</div>
</div>
<div id="footer">Footer</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
You might want to try using jQuery for this kind of size-matching.
With jQuery you simply grab the width of the content div, and change both the header and footer widths just when the page is loaded.
$('#header,#footer').width($('#content div').width());
http://jsfiddle.net/z4hegp1o/4/
If I set a min-height: 700px; on my sidebar, it works fine, however if the content length goes beyond 700 px, then the sidebar ends and the page content takes up the full width of the page. I want the sidebar to go down the length of the page, as long or short as the content is. How can this be done?
Here's my sidebar's css code:
#sidebar
{
float: right;
min-height: 700px;
min-width: 25%;
background-color: #FFFFFF;
}
Changing the height to 100% causes the sidebar to disappear completely.
Here's the html code;
<bod>
<div id="sidebar"></div>
<div id="content">Content here....</div>
</div>
Give it a position:absolute; with bottom:0px;
Check it out : http://jsfiddle.net/AliBassam/McJG8/
HTML
<div id="parentDiv">
<div id="content">Content here....</div>
<div id="sidebar"></div>
</div>
CSS
#parentDiv
{
position:relative;
min-height:700px;
}
#sidebar
{
position:absolute;
right:0px;
bottom:0px;
top:0px;
width:100px;
}
The #parentDiv now have min-height:700px; if its stretched by its contents, the #sidebar will stretch as well.
Not knowing the exact requirements of what you're trying to do, this sounds like a solution that could easily be fixed using Faux Columns.
I have a couple of pages that seem to cause some conflicting results. I have a login page that should have a background of gray, and then my inner pages have a background of white.
But the div with id="loginPage" doesn't stretch the entire height of the "container" div. Therefore the loginPage div is gray but the space leftover for the container div is still white.
Now, the main container has a min-height because I have a couple pages with a large amount of content. When I set it to only height:100%, the footer isn't on the bottom of the page. But once I had set it to min-height it drops to the bottom of the page.
Here is my css:
html, body { height: 100%;}
#loginPage {
width:100%;
height:100%;
float:left;
background-color:#F7F7F9!important;
}
#container
{
min-height:95%;
position: relative;
background:white;
}
.footerBg
{
width:100%;
padding-top:10px;
margin:0;
position:relative;
}
and html:
<div id="container">
<div class="topHeader_login">
<form method="post" action="/">
<div id="loginPage">
<div id="login_content">
<div id="login">
<div id="info">
<div style="text-align:center; padding-top:15px; float:left;"> </div>
</div>
</div>
</form>
</div>
<div class="footerBg">
I think you may want to have a look at this: http://ryanfait.com/sticky-footer/
It explains how you can keep your footer always on the bottom of your page, even if the content is smaller, and it never adds scrollbars if they are not nessecary. You could then just add your 'grey' background color to the page wrapper.
If you want to set a height on your web pages to a percentage, you
have to set the height of every parent element of the one you want the
height defined.
source: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
try giving form { height: 100% }
take a look at this fiddle, I cleaned up your html and css
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.