gpt4 book ai didi

css - 高度 div 100% 带填充

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

我有一个设置,要求一个 div 填充 100% 的屏幕,边距为 10 像素。在其中,顶部有一个导航 Pane ,下面是一个带有填充的内容 div 和一个带有填充的内部内容潜水。但是,使用父级的 100% 高度然后添加边距/填充会将 div 拉伸(stretch)到 100% + 边距 + 填充。有解决办法吗?我注意到绝对定位技巧,但如果我绝对定位我的内容 div,那会扰乱其他 div 的流程。它还使调整大小和流动成为非液体。有什么方法可以保留这些东西并仍然实现我的目标,最好是使用 CSS 而不是 javascript?

代码如下:

ASPX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">

</div>
</div>
</div>
</body>
</html>

CSS

html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}

最佳答案

您可以尝试将 box-sizing:border-box 添加到您希望同时具有 100% 高度和内边距的任何元素上。

在 IE8+ 和优秀的浏览器中工作,所以浏览器支持实际上相当不错

http://css-tricks.com/box-sizing/

关于css - 高度 div 100% 带填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10108332/

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