Question

我想创建网格视图，其中页眉包含10％的页面高度和90％的正文。

我试图调整它，但是当右侧的元素部分缩放时，身体部分不会增长。

我想以响应的方式在右侧面板中添加元素。

有没有什么好方法可以组织这个？

小提琴：http://jsfiddle.net/karimkhan/q18yzkoz/5/

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="background-color:lavender;">
            <div class="header">Header Height should be 10% of the page</div>
        </div>  
    </div>

    <div class="row" >
        <div class="col-xs-8" style="background-color:lavenderblush; height:100%">Body, Height should be 90% of th page
        </div>
        <div class="col-xs-4" style="background-color:lavender;">
            <!-- 12 repeated rows as below, height should fit in 90% region in responsive manner -->
            <div class="row" >
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item1</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item2</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item3</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item4</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item5</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item6</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item7</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item8</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item9</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item10</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item11</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item12</div>
                </div>
         </div>
     </div>
</div>

</body>

Answer 1

你有很多你实际上没有使用的div。所有这些都需要明确地设置为100％高度并且还有一个包装器。

看看这支笔：http://codepen.io/anon/pen/bdOyJp

你有很多嵌套的div。我把HTML剪切到了这个：

<div class="header">Header Height should be 10% of the page</div>
<div class="content row">
  <div class="col-xs-8" style="background-color:lavenderblush; height:100%">
    Body, Height should be 90% of th page
  </div>
  <div class="col-xs-4" style="background-color:lavender;">
    <!-- all the items... -->
  </div>
</div>

这就是我将CSS缩减为：

html, body {
    height: 100%;
}
.header {
    height : 10%;
    background: teal;
}
.content {
    width: 100%;
    height: 90%;
    background: deeppink;
}

我在.content上设置了一个背景，以便填充右列。这是一个“人造”专栏＆＃39;技术，但还有更多。

Answer 2

您的代码中的BODY（.col-xs-8）或HEADER（.header）高度都未被识别。因此，身体不仅不是90％，而且头部不是10％。标题的高度只是内容的高度。您可以插入其他百分比值，但您不会看到任何更改。

这是由代码中众多嵌套容器和各种指定高度引起的，这有点令人困惑和错综复杂。但是，您的加价并不需要改变以实现目标。

以下是我对您的代码的调整。我使用过内联样式。最后，您可能希望将这些样式移动到外部样式表中，这样可能更清晰，方便和维护，但我在此处使用内联样式进行演示。

首先，为主div容器添加100％的高度：

<div class="container-fluid" style="height: 100%;">

其次，为标题行添加10％的高度，并添加来自子div的内嵌样式。

<div class="row" style="height: 10%; background-color:lavender;">

<div class="col-xs-12" //DELETE THIS: style="background-color:lavender;"//>

第三，为正文行添加90％的高度，并添加来自子div的内嵌样式。

<div class="row" style="height: 90%; background-color: lavenderblush;">

<div class="col-xs-8" //DELETE THIS: style="background-color:lavenderblush; height:100%"//>

这就是诀窍。我给你10％的身高和90％的身体。

http://jsfiddle.net/q18yzkoz/6/

请记住，90％相对于父容器（.container-fluid），高度为100％，相对于HTML / BODY高度100％。所以它一直延伸到页面的底部（这是你的问题所要求的）。

但是，如果您希望body div与右列匹配，请将正文行的高度值从90％调整为~55％。

http://jsfiddle.net/q18yzkoz/8/

或者，您可以将父容器（.container-fluid）的高度值减少到70％，然后从那里开始工作。

最后，您在问题中说：

有没有什么好方法可以组织这个？

还有其他方法可以创建更高效，更健壮的响应式网格布局。您可以考虑以下四种方法：

<强> Easy Responsive CSS Grid Layouts

希望这会有所帮助。如果您有任何问题，请在下面发表评论。

如何在网格视图中使div为页面高度的90％

2 个答案: