Question

我有一个非常简单的布局，有2个DIVS：一个固定宽度的左侧栏和一个右侧区域，它应该占据剩余宽度的100％。两者都是100％高度，如果高度高于窗口高度，我希望正确的项目有一个垂直滚动条。

我当前的代码占据整个浏览器窗口，但右侧区域向右滚动浏览器可视区域，并且从未显示垂直滚动条。

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;
    position: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%;
}

Answer 1

当你给出width:100%的东西时，它意味着'无论我的容器的宽度是多少，我将具有相同的宽度' - 这并不意味着'我会占用100％的可用空间'

换句话说，假设你的父DIV宽300像素 - 如果你给孩子div width: 100%，它将是300像素的100％。

你可以在这里做什么，因为你的左列是固定宽度，是在右边div添加左边距。

div.left
{
     width: 249px;
}

div.right
{
     width: 100%;
     margin-left: 249px;
}

Answer 2

有时您需要将CSS中正文中的边距设置为0。

EG。

body {background-color:#000; margin-left:0px;}

默认情况下，某些浏览器左侧有几个像素填充。

Answer 3

为什么不让更大的区域填满空间，为什么不只是让左栏完全定位，主要内容<div>填满整个页面，padding-left转换内容？

Answer 4

宽度为100％的div将填充它所在的容器。您的容器是页面宽度的100％。它没有考虑到你用绝对定位将它向右移动250px的事实。

你最好的选择：

.hideskiplink应该来自.main。浮动.hideskiplink到左边，给它一个宽度，然后给.main一个margin-left匹配.hideskiplink的宽度。

Answer 5

我已经通过将min-width设置为'body'到与该div中我的内容宽度相同的值来修复我的问题。

DIV宽度“100％”滚动页面的右端

5 个答案: