gpt4 book ai didi

html - 表格单元格中的 div 100%

转载 作者:太空宇宙 更新时间:2023-11-04 15:05:44 25 4
gpt4 key购买 nike

我写了这段代码,但我不知道为什么它不能在 #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>

最佳答案

据我了解,您希望边栏高度为包含它的 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

关于html - 表格单元格中的 div 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15905917/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com