0

我写了这段代码，但我不知道为什么它在#sidebar( display: table-cell) 中不能 100% 工作。

这是我的代码 CSS：

<head>
<style type="text/css">

body { margin: 0 auto; width: 800px; }

#wrapper{
    display: table;
    overflow: hidden; /* clearance */
}

#panel1, #panel2{
    display: table-cell;
    vertical-align: top;
    width:400px;
}

#panel1{ background-color: blue; }

#panel2{ background-color: grey; }



#sidebar, #content{ float:left; }

#sidebar{
    background-color: yellow;
    width: 100px;
    height: 100%;
}

</style>
</head>

和 HTML 代码：

<body>

    <div id="wrapper"> 

        <div id="panel1"> 
            <div id="sidebar">menu</div>

            <div id="content">
                <br/><br/><br/><br/><br/><br/><br/><br/><br/>end
            </div>
        </div>

        <div id="panel2"><br/></div>

    </div>

</body>
4

2 回答 2

1

据我了解，您希望侧边栏高度为包含它的 div 的 100%（在本例中为 panel1）

您的侧边栏也没有按您想要的方式显示的原因是因为您没有为保存菜单的 div 设置高度（在您的代码中，这将是“panel1”div）。

要解决此问题，只需为容器（'panel1'）设置一个高度，您的侧边栏就会相应调整。

CSS

#panel1 { 
     background-color: blue;
     height: 600px; /* You can set this height to whatever size you prefer */
     }

你可以在这里查看它的运行情况

于 2013-04-09T15:35:39.690 回答
0

看来您正在尝试等高列？如果是这样，请看这里：

http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/

还有其他几篇关于如何实现这一点的文章和技巧，只需谷歌“html / css中的等高列”

于 2013-04-09T15:31:53.037 回答