div with full content width
The simplified content of my html page is:
<body>
<div id="container">
<div class="header"></div>
<div class="main-content" style="float:none; align:center; text-align:center; margin:auto;">
<table style="width: 2000px;">
<tr>
<td>Some Content</td>
</tr>
</table>
</div>
<div class="footer">
<a href="#">EMS</a>
</div>
</div>
</body>
The .css:
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
font-family: "Liberation Sans",'Lucida Grande',Verdana,Arial,Helvetica, "Luxi Sans", "Bitstream Vera Sans", Tahoma,Sans-Serif;
font-size: 90%;
background: #FAFAFA;
color: #333333;
}
#container {
background:#AEC7DB url('../main-bg-gradient.png') repeat-x top left;
position: relative;
min-height: 100%;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
max-width: 100%;
}
.main-content {
position: relative;
padding: 0px;
}
.footer {
clear:both;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 90%;
padding: 4px 0px 4px 0px;
text-align: center;
}
As you can see I have added a table width 2000px. As because I will add there table dynamically. And this causes the deformation to the page. The div with id "container" is not covering its content. It is taking the size of my screen and rest 开发者_开发百科of the portion in the left is white also there is a horizontal scrollbar as this is natural with 2000px table.
What I need is that the div with id "container" cover its whole content and the the div with id "header" remain fixed in its position if one scroll the page horizontally.
How can I achieve this?
Thank you.
The first solution is to change the width of #container from 100% to 2000px and remove max-width.
Demo: http://jsfiddle.net/h3TQ3/
A second solution is to remove max-width and width from #container and change position:relative to position:absolute
Demo: http://jsfiddle.net/h3TQ3/1/
To have your header in fixed position you can add the following css:
.header {
position: fixed;
top: 0;
width: 100%;
}
Remove height width min-height and min-width from #container CSS.
Add
.header {
position: fixed;
top: 0;
left: 0;
}
Also you will need to set the top margin for main-content to match .header
加载中,请稍侯......
精彩评论