gpt4 book ai didi

html - CSS & HTML : Where to set main height(parent) of the page?

转载 作者:行者123 更新时间:2023-11-28 02:56:40 25 4
gpt4 key购买 nike

请问网页的主父级高度放在哪里?

例如我这样构建我的页面:

<body>
<div class="page-wrapper">

</div>
</body>

我想要我的 <body>高度为 auto所以它适合的页面包装器的高度是多少,但同时我也希望页面包装器的高度为 auto所以它会回应它的 child <div>秒。但是在那里设置高度 auto不会给 child 高度的百分比(%)值。

例子:

<body>
<div class="page-wrapper">
<nav class="navbar navbar-default" style="height:25%;">

</nav>
</div>
</body>

设置.navbar高度到 25% 是行不通的。我只想问一下增加网页高度的正确方法或技巧是什么?

谢谢。

最佳答案

对于相对定位的元素,top, left, right, bottom 属性指定移动生成框的相对距离。请记住,在相对定位的情况下,它们相互补充,因此 top:1em 和 bottom:-1em 表示相同,并且为同一元素指定顶部和底部(或左侧和右侧)是没有意义的,因为一个的值将被忽略。

但是在绝对定位的情况下。在这里,可以同时使用所有四个属性,以指定从定位元素的每条边到包含 block 的相应边的距离。您还可以指定绝对定位框的一个 Angular 的位置——比如使用顶部和左侧——然后使用宽度和高度指定框的尺寸(或者如果你想让它不使用宽度和高度收缩包装以适合其内容)。

这段代码可能会满足您的需求:

.page-wrapper {
position: relative;
min-height: 100px;
}
.navbar {
height: 25%;
background-color:red;
position: absolute;
top: 0px;
left: 0px;
right: 50%;
bottom: 0px;
}
.content {
height: 300px;
width: 50%;
background-color: blue;
}
<body>

<div class="page-wrapper">

<nav class="navbar navbar-default">
</nav>
<div class="content"></div>

</div>

</body>

关于html - CSS & HTML : Where to set main height(parent) of the page?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46417413/

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