Question

我编写了这段代码，但我不知道为什么它在#sidebar（display: table-cell）中无法正常运行。

这是我的代码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>

Answer 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 */
     }

You can view it in action here

Answer 2

看来你正在尝试等高柱？如果是这样，请看一下：

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

还有其他一些文章和技巧如何实现这一点，只需google“html / css中的高度相等的列”

表格单元格为100％

2 个答案: