0

我遇到了这个问题，我在 div 中放置了一个 div，我将“标题”定位为高度 50，然后将“导航栏”置于其下方，所以我将高度设置为 100%，尽管事情是，它没有停留在 div 内，它实际上偏离了 div 并离开了 div 并出现了滚动条。

我希望“站点”占用墙壁，然后所有其他 div 都适合该 div。

    <div id="site">
        <div id="title">TitleBar</div>
        <div id="navbar">NavBar</div>
        <div id="frame">FrameBar</div>
    </div>
body{
    margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}

我发现了一张显示类似内容的图像。 http://img176.imageshack.us/img176/4637/picture1zb1.png

4

3 回答 3

0

您可以通过向 css 添加 float 属性来使 HTML 中的分区彼此并排显示。

#navbar{
    border: 1px solid #c38a8a;
    width: 200px;
    height: 100%;
    float: left;
}

此外，始终在大小后添加“px”单位。现代浏览器假定您的意思是 px，但较旧的浏览器可能不是。

当您有一个设置像素宽度的侧边栏时，没有防止重叠的好方法。要实现液体宽度（或流体宽度）样式，您必须在 #frame 左侧添加负 200px 边距（到计数器侧边栏）。然后，在#frame 中添加另一个分区来为该部分设置样式。这就是我在我的网站上实现外观的方式，这也是之前默认 Drupal 主题（Garland）中使用的解决方案。

#frame{
    margin-left: -200px;
}
于 2012-09-20T01:40:40.463 回答
0

那是因为 100% 高度实际上意味着“使用与容器相同的高度”。

但是我并没有完全得到你对这个布局的所有要求，如果你的导航栏是一个导航栏，它应该被设计成当内容太大时允许滚动条出现。

但我认为你会用错误的结构来完成这个，你想要一个包装器 div 有什么实际原因吗？我已经为此创建了一个小提琴，检查这是否更接近你想要的：http: //jsfiddle.net/6g6HV/2/

这另一个是你的，如果你想玩它：http: //jsfiddle.net/yq8PS/3/

编辑：将 javascript 解决方案添加到答案http://jsfiddle.net/6g6HV/9

于 2012-09-20T02:15:29.387 回答
0

在这种情况下，导航栏的 100% 并不意味着剩余高度，而是父级可见高度的 100%；因此，如果父级的高度为 400 像素，那么导航栏的高度也将为 400 像素。如果将此大小添加到标题栏的高度，则得到的总值大于父级的大小；因此，scolling bar 的出现。

虽然宽度通常没有问题，使其看起来充满了屏幕的整个长度，但在 HTML 和 CSS 中很难对高度做同样的事情，因为它们不是为这类事情而设计的；尤其是具有叠瓦状结构（div 内的 div）。

有些人会使用 Javascript 来获取屏幕（浏览器）的大小并相应地计算其对象的大小，但我不知道您是否可以使用纯 HTML/CSS 解决方案来做同样的事情；特别是如果您想让您的解决方案与许多浏览器兼容。

有关更多信息，请查看http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

于 2012-09-20T04:04:44.300 回答