Question

我有3列主题，我希望所有列的高度相同。列左侧和右侧的高度是固定的，应该与动态高度列中间相同。

布局代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="sidebar-left">Sidebar left</div>   
            <div id="sidebar-middle">BIG SIDEBAR MIDDLE</div>  
            <div id="sidebar-right">Sidebar right</div> 
        </div>
    </body>
</html>

CSS代码：

html,
body {
    height:100%;
    background:#FFEE33;   
}
#container {         
    min-height:100%;
    background:#FFAA00; 
}           
#sidebar-left,
#sidebar-right{   
    float:left;
    width:33%;
    min-height:100%; 
    background:#FF0000;
}  
#sidebar-middle {  
    float:left;
    width:33%;
    height:2000px;
    background:#444;
}

这可能只在CSS中生成吗？感谢任何帮助。

Answer 1

尝试在列后添加clearfix。这应该迫使容器根据其内容物的大小。当你浮动元素时，它们会松开它们的高度值 - 通过在浮动元素列表后添加一个清除它们重新获得此属性。

简单 -

添加到css

.clearfix{
  clear: both;
  position: relative;
}

和html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="sidebar-left">Sidebar left</div>   
            <div id="sidebar-middle">BIG SIDEBAR MIDDLE</div>  
            <div id="sidebar-right">Sidebar right</div> 
            <div class="clearfix"></div>
        </div>
    </body>
</html>

这应该让你指出正确的方向。

div高度基于另一个div高度

1 个答案: