0

我有 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中制作吗？感谢任何帮助。

4

1 回答 1

0

尝试在您的列之后添加一个clearfix。这应该强制容器根据其内容调整大小。当您浮动元素时，它们会丢失它们的高度值 - 通过在浮动元素列表之后添加一个 clear ，它们会重新获得此属性。

简单的 -

添加到 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>

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

于 2013-01-14T16:19:18.837 回答