引導程序中等於div和100％高度

Question

我正在嘗試使用5個DIV制作頁面。
計划是使用Bootstrap 3將一張圖片放在中央DIV中，並在其他4張圖片中放置一個鏈接。

通緝結果：

代碼到目前為止：

 .container-fluid2 { min-height: 100%; overflow: hidden; background-color: black; } .levogore5 { height: 50%; min-height: 50%; margin-bottom: -22%; padding-bottom: 22%; min-width: 25%; max-width: 100%; background-color: lime; vertical-align: top; } .levodole5 { height: 50%; min-height: 50%; margin-bottom: -25%; padding-bottom: 25%; min-width: 25%; max-width: 100%; background-color: green; vertical-align: baseline; margin-top: 22%; } .centar5 { height: 100%; min-height: 100%; min-width: 50%; max-width: 100%; background-color: red; margin-bottom: -50%; padding-bottom: 50%; overflow: hidden; } .desnogore5 { height: 50%; min-height: 50%; margin-bottom: -22%; padding-bottom: 22%; min-width: 25%; max-width: 100%; background-color: aqua; vertical-align: top; } .desnodole5 { height: 50%; min-height: 50%; margin-bottom: -25%; padding-bottom: 25%; min-width: 25%; max-width: 100%; background-color: blue; vertical-align: baseline; float: right; margin-top: 22%; } 

 <div class="container-fluid2"> <div class="row"> <div class="col-sm-3 levogore5">levo gore</div> <div class="col-sm-5 col-sm-5 span2 centar5">centralni</div> <div class="col-sm-3 desnogore5">desno gore</div> </div> <div class="row"> <div class="col-sm-3 levodole5">levo dole</div> <div class="col-sm-3 desnodole5">desno dole</div> </div> </div> 

我想我在這里閱讀了所有現有的問題和答案。
我試過html/body 100% ， max-height ， container-fluid ， -9999px ，但是它們沒有用。

我忘了提及，響應性是至關重要的，在我的例子中，那些漂浮：正確（在最后DIV的css中），在較小的屏幕上制造非常大的混亂。

我的想法是使用bootstrap來減少較小屏幕的問題，在更簡單的頁面引導程序只是制作一堆水平DIV所以我希望有這樣的東西

Answer 1

這是一個使用彈性盒的地方的一個很好的例子！

在我看來，你正在采取基於行的方法。 我認為基於列的方法更合適。

當我設計一個網站時，我喜歡嘗試將其分解為橫跨頁面寬度或高度的正方形或矩形。

在我看來，這個設計有一個橫跨頁面寬度的矩形，它包含3個跨越頁面高度的矩形，然后是每個矩形中的一些較小的矩形。

 body { margin: 0; padding: 0; } .column > div { border: 1px solid blue; min-height: 150px; } @media (min-width: 600px) { .row { display: flex; flex-direction: row; min-height: 100vh; } .row > div { flex-basis: 25%; } .row > div.main { flex-basis: 50%; } .column { display: flex; flex-direction: column; } .column > div { flex-basis: 50%; } .column.main > div { flex-basis: 100%; } } 

 <div class="row"> <div class="column"> <div>Div width 25% height 50%</div> <div>Div width 25% height 50%</div> </div> <div class="column main"> <div>Div width 50% height 100%</div> </div> <div class="column"> <div>Div width 25% height 50%</div> <div>Div width 25% height 50%</div> </div> </div> 

Answer 2

無需修改引導網格的響應示例 （額外點因為您不應修改網格，否則您將無法在每個方案中使用它）

我不得不改變你的html並添加幾個類：

<div class="container-fluid container-table">
  <div class="row inline-row">
    <!-- I'm using three columns and nesting aqua and blue under the 1st column -->
    <div class="col-xs-12 col-sm-3">
      <div class="row">
        <div class="col-xs-12 aqua"></div>
        <div class="col-xs-12 blue"></div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 yellow"></div>

    <!-- Nesting greenyellow and green -->
    <div class="col-xs-12 col-sm-3">
      <div class="row">
        <div class="col-xs-12 greenyellow"></div>
        <div class="col-xs-12 green"></div>
      </div>
    </div>

  </div>
</div> 

而CSS：

/* Colors */
.aqua{ background-color:aqua; }
.blue{ background-color:blue; }
.yellow{ background-color:yellow; }
.greenyellow{ background-color:greenyellow; }
.green{ background-color:green; }

/* Height 100% to all the elements */
html, 
body, 
.container-table, 
.inline-row, 
.inline-row > div {
    height: 100%;
}

/* We do the trick here with Table, table row and table-cell */
.container-table {
    display: table;
    width: 100%; /* Width is important for display:table */
}
.inline-row { display: table-row; }
.inline-row > div { display: table-cell; }

/* This will set our heights as we need them */
.inline-row > div > .row { height: 100%; }
.inline-row > div .row > div { height: 50%; }

編輯：將左右網格更改為寬度的25％。

我的JsFiddle Live示例

Answer 3

小提琴

簡而言之，你制作6盒。
你還想要它們之間沒有填充物嗎？

如果是這樣，只需添加到您的CSS：

[class*='col-'] {
    padding-right:0;
    padding-left:0;
}

HTML：

<div class="container-fluid2">
  <div class="row">
    <div class='col-sm-3'>
      <div class="bg-color-red">left 3</div>
      <div class="bg-color-green">left 3</div>
    </div>
    <div class="col-sm-6 bg-color-green">
          <div class="bg-color-green">central 6</div>
    <div class="bg-color-green">central 6</div>
    </div>

    <div class='col-sm-3'>
      <div class="bg-color-red">right 3</div>
      <div class="bg-color-green">right 3</div>
    </div>
  </div>
</div>

CSS：
引導。 看小提琴。

Answer 4

我已經給你下面的代碼，它們可以從較小的桌面到最大的桌面（在所有情況下都是桌面）和bootstrap。 正如你所說，在移動設備方面你喜歡堆，然后根本就不要編寫col-sm-*類和@media查詢

 .height-50{ height : 480px; } .height-100{ height : 960px; } .container-fluid div{ border : 1px solid black; } @media (min-width: 576px) { .height-50{ height : 230px; } .height-100{ height : 460px; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> <div class="container-fluid"> <div class="col-lg-3 col-sm-3"> <div class="row"> <div class="col-lg-12 col-sm-12 height-50" style="background-color : lightgray"> Width : 25%;<br>Height : 50%; </div> <div class="col-lg-12 col-sm-12 height-50" style="background-color : #9898e7"> Width : 25%;<br>Height : 50%; </div> </div> </div> <div class="col-lg-6 col-sm-6"> <div class="row"> <div class="col-lg-12 col-sm-12 height-100" style="background-color : yellow"> Width : 50%;<br>Height : 100%; </div> </div> </div> <div class="col-lg-3 col-sm-3"> <div class="row"> <div class="col-lg-12 col-sm-12 height-50" style="background-color : yellowgreen"> Width : 25%;<br>Height : 50%; </div> <div class="col-lg-12 col-sm-12 height-50" style="background-color : green"> Width : 25%;<br>Height : 50%; </div> </div> </div> </div>