Question

我正在尝试在窗口左侧实现一个设置宽度的栏，另一个div填充窗口的右侧。我尝试过使用“float：left;”在两者上，但这导致“右”区域堆叠在左侧栏下方。

Correct

这是正确的，除了我需要右边的白色区域被另一个div填充。在我目前的尝试中，这就是发生的事情：

Problem

如何让底部div填满右边的白色区域？黑色渐变是背景：设置，并且可以正确缩放。

谢谢！

Answer 1

我已经想出如何做到这一点......对于其他需要知道如何做的人：

对于左侧栏，您需要设置已知宽度，在此替换％width％与您的宽度...

CSS：

.leftBar{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    color:white;
    height: 100%;
    width: %width%;
}
.mainCenterContent{
padding-left:%width%;
width:100%;
height:100%;
}

HTML：

<div class="leftBar">
bleh
</div>
<div class="mainCenterContent">
    bleh
</div>

正如您所看到的那样，填充基本上将div移动到足以不与左侧栏相交。这对我来说很合适。

谢谢！

Answer 2

尝试拥有

clear:both;

之后的两个组成部分。

请参阅：Sidebar

Answer 3

这是另一种方法：

<style>
body, html {
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
}
div#left_nav {
  position:relative;
  width:250px;
  float:left;
  background-color:#58A;
  height:100%;
}
div#page_content {
  position:static;
  background-color:#CDF;
  height:100%;
}

<body>
  <div id="left_nav">left menu</div>
  <div id="page_content">page content</div>
</body>

制作2列布局有许多不同的方法。有些比其他更复杂。我发现，我的设计越复杂，我的布局就越健壮。搜索并找到最适合您需求的产品。

带Div的HTML列

3 个答案: