gpt4 book ai didi

html - div需要水平居中,完全占据垂直空间

转载 作者:行者123 更新时间:2023-11-28 13:06:29 32 4
gpt4 key购买 nike

我有类似于以下结构的东西:

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

我希望内部 div 占据页面的整个垂直高度,除了顶部和底部的 8px 边距。我还希望这个 div 在 body 内水平居中,左右两侧的最小边距为 8px。我不希望页面滚动并且需要不惜一切代价避免使用 calc() 以获得浏览器支持能力。

我试过:

html, body{
height: 100%;
}
div {
position: absolute;
top: 8px;
bottom: 8px;
}

强制它留出 8px 的“边距”是没问题的,但是现在如果不使用 calc() 就不可能将它水平居中,因为它的宽度是可变的,并且没有任何元素可以与之相关。

最佳答案

我希望我理解你的问题......你希望 div 填满整个窗口,除了 8px ......是这样吗?

你可以使用这个 CSS 做到这一点:

div {
background: lightblue;
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;
}

检查 demo .

[选项 2]

如果您希望 div 具有固定宽度(或使用 max-widthmin-width 半固定),您可以使用此代码:

html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
padding: 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: lightblue;
width: 300px;
margin: 0 auto;
height: 100%;
}

它表示主体的高度和宽度为 100%,并计算其宽度内的填充(因此 box-sizing)属性。然后您可以指定 div 的宽度,并使用 margin: 0 auto 将其居中。

检查 updated demo .

关于html - div需要水平居中,完全占据垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20081212/

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