Question

我有一个简单的问题，但看起来我并不那么聪明：/而且我也有点匆忙！我通过其他答案并尝试了几个选项，我找不到解决方案。如果这是微不足道的我会道歉，我是一个菜鸟......

描述：这是一个左对齐网站。点击此处：http://goo.gl/LrzYy7

我有一个DIV（id =“leftwrap”）在左边，一个DIV（id =“content”）浮在它的右边。在“Leftwrap”中，我有两个DIV在彼此之上。底部的一个（id =“header_bottom”）具有“height：100vm”，因此它根据“Content”DIV中的内容进行扩展。至少这是个主意。

但......出于某种原因，它只是......延伸到它感觉良好的任何高度。或类似的东西：/

这是HTML：

<body>
<div id="mainwrap">
<div id="leftwrap">
<div id="header"><img src="img/leftbar.jpg" width="270" height="929" alt="Left Column" /></div>
<div id="header_bottom"></div>
</div>

<div id="content"><img src="img/rightcontent.jpg" width="675" height="770" alt="Right Content" /></div>
</div>
</body>

这是CSS

body, div, img {margin:0; padding:0; }
body { 
    position: absolute;
    top: 0;
    left: 0;
    background: #f0f0f0;
}  

/*MAIN DIVS AND CONTENT*/  
#mainwrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 945px;  
}
#leftwrap { 
    width: 270px;  
    float: left;
}  
#header {    
    width: 270px;  
    height: 929px; 
}  
#header_bottom {  
    width: 270px;  
    height:100vh; 
    background: #d8991c;
} 

#content
{
    position: absolute;
    top: 0;
    left: 270px;
    float: right; 
}

我知道它有点混乱（我打赌它可以编码得更简单，但我很难让它正确浮动）。

由于没有指定高度或其他东西是否有问题？

由于

Answer 1

在HTML中

执行此操作：

<div id="mainwrap">
<div id="leftwrap">
<div id="header"><img src="img/leftbar.jpg" alt="Left Column" /></div>
<div id="header_bottom"></div>
</div>

<div id="content"><img src="img/rightcontent.jpg" alt="Right Content" /></div>
</div>

基本上，删除内联样式。除非你被迫，否则永远不要再使用它们。即便如此，尽可能地抵制这种冲动。

现在，在你的CSS中：

body, div, img {
    margin:0;
    padding:0;
}
body {
    top: 0;
    left: 0;
    background: #f0f0f0;
}
/*MAIN DIVS AND CONTENT*/
#mainwrap {
    top: 0;
    left: 0;
    width: 945px;
}
#leftwrap {
    width: 270px;
    float: left;
}
#header {
    width: 270px;
    height: 929px;
}
#header_bottom {
    width: 270px;
    background: #d8991c;
}
#content {
    top: 0;
    left: 270px;
    float: right;
}

基本上，请删除position:absolute声明。 除非你被迫，否则永远不要再使用它们。即便如此，尽可能地抵制这种冲动（好吧，这次是夸张的，但实际上，100次中有99次使用绝对值定位，这是错误的并导致布局问题）

无论哪种方式，在您的特定情况下，您的问题是随机添加的100vh。我想你不知道它意味着什么，但为了以防万一，它被错误地使用了，它完全正是你告诉它要做的：拥有viewport的100％高度，从而导致布局高度加倍

Answer 2

CSS还有一个名为z-index的函数，它可以在网页上启用图层。例如，z-index为0将位于图层堆栈中页面的最底部，而z-index为5将是第5层并且将是顶部。 z-index可以根据需要启用多个层。这是一个没有HTML的小例子。

Div.Class1 {z-index: 0;}
Div.Class2 {z-index: 1;}
Div.Class3 {z-index: 2;}

因此，在这个小例子中，ID为Class1的div将位于底部，ID为Class2的div将位于Class1 div的前面，最后Class3 Div将位于所有其他位置之上

Answer 3

除上述之外：我简化了html和css：

<body>
<div id="mainwrap">

<div id="header"><img src="img/leftbar.jpg" width="270" height="929" alt="Left Column" /></div>
<div id="content">
<img src="img/rightcontent.jpg" width="675" height="770" alt="Right Column" /><br />
<img src="img/rightcontent.jpg" width="675" height="770" alt="Right Column Copy" />
</div>

</div>
</body>

和css：

/*GENERAL STUFF*/

html, body {height: 100%;}
body, div, img {margin:0; padding:0; background: #f0f0f0;}

/*MAIN DIVS AND CONTENT*/ 

#mainwrap {
    width: 945px; 
}

#header {    
    width: 270px;  
    height: 100%; 
    float:left;
    background: #d8991c; /*bg-color that will create seamless extention the left DIV one height:100% will work*/
}  

#content
{
    width: 675px;
    float: right; 
}

以下是网站：我已更新网站http://goo.gl/LrzYy7

那么，就所有神圣的名义而言，无论有多少内容，我都会让DIV始终保持100％的高度？我尝试过在网上找到的大约10个选项，但没有一个可以工作：//

请... helppp。谢谢！

将div浮动到右边？

3 个答案: