DIV width of "100%" scrolls off right end of page
I have a very simple layout with 2 DIVS: a fixed width left bar and a right area which should take up 100% of the remaining width. Both are 100% height, and I want the right item to have a vertical scroll bar if the height is taller than the window height.
My current code takes up the whole browser window, but the right area scrolls way off the browser viewable area to the right, and there is never a vertical scroll bar visible.
HTML:
<body>
<form id="Form2" runat="server">
<div class="page">
<div class="clear hideSkiplink">
Left side stuff goes here....
</div>
<div class="main">
Right size stuff goes here....
</div>
</div>
</form>
</body>
CSS:
div.hideSkiplink
{
padding:20px;
background-color:#990000;
positio开发者_开发问答n:fixed;
top:0px;
left:0px;
width:249px;
height:100%;
}
div.main
{
padding: 10px;
margin: 0px;
background-color: #000000;
color: #ffffff;
position: fixed;
top: 0px;
left: 250px;
width: 100%;
height: 100%;
}
When you give something width:100% it means 'whatever the width of my container, I will have the same width' -- it does not mean 'I will take up 100% of the available space'
In other words, let's say your parent DIV was 300 pixels wide -- if you give the child div width: 100%, it will be 100% of 300 pixels.
What you can do here, since your left column is fixed width, is add a left margin to the right div.
div.left
{
width: 249px;
}
div.right
{
width: 100%;
margin-left: 249px;
}
Some times you need to set the margin in the body in the CSS to 0.
EG.
body {background-color:#000; margin-left:0px;}
Cause by default some browsers have couple of pixel padding on the left hand side.
Instead of having the wider area fill up space, why not just make the left bar absolutely positioned and the main content <div> the fill up the whole page, with a padding-left to shift over the content?
A div with 100% width will fill the container it is in. Your container is 100% the width of the page. It doesn't take into consideration the fact you shifted it 250px to the right with absolute positioning.
your best bet:
.hideskiplink should come after .main in the flow. Float .hideskiplink to the left, give it a width, and then give .main a margin-left matching the width of .hideskiplink.
I've fixed my issue with this by setting the min-width to the 'body' to the same value as the width of my content within that div.
加载中,请稍侯......
精彩评论