Question

我想问一下在哪里放置网页的主要父级高度？

例如，我构建了我的页面：

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

   </div>
</body>

我希望我的<body>高度为auto所以它适合页面包装器的高度，但同时我也希望页面包装器具有高度{{1}所以它会响应它的孩子auto。但设置高度<div>不会给孩子身高的百分比（％）值。

示例：

auto

将<body> <div class="page-wrapper"> <nav class="navbar navbar-default" style="height:25%;"> </nav> </div> </body>高度设置为25％不起作用。我只是想问一下为网页添加高度的正确方法或技巧是什么？

谢谢。

Answer 1

我知道你在bootstrp navbar中使用bootstrap navbar-default是bootstrap.css中的bultin你正在添加

Answer 2

将height:auto放入页面包装器

. page-wrapper {
    height: auto;
}

对于身体。

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Answer 3

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

但在绝对定位的情况下。这里，可以同时使用所有四个属性，以指定从定位元素的每个边缘到包含块的相应边缘的距离。你也可以指定绝对定位框的一个角的位置 - 比如使用顶部和左边 - 然后使用宽度和高度指定框的尺寸（或者如果你想让它只是使用没有宽度和高度收缩包装以适应其内容）。

此代码可能符合您的需求：

.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>

Answer 4

首先将min-height: 100%设置为body和html。如果你想要以％为单位的高度，那么它的父级应该有一些定义的高度，同时你希望父高是自动的，然后将min-height:100%也提供给parent，即.page-wrapper。现在给孩子min-height: 25%。

如果您希望将child高度限制为25%，则仅将最大高度设为25％。

body, html, .page-wrapper {
  min-height: 100%
}
.navbar-default {
  min-height: 25%
}

CSS＆amp; HTML：在哪里设置页面的主高度（父级）？

4 个答案: