1. 首頁
  2. 問答
  3. 等於div和100％身高的自舉

等於div和100％身高的自舉

2016-11-12 35 views
5

我試圖用5個DIV製作頁面。
計劃是把在中央DIV一個圖像，並在每個其他4的鏈接，使用自舉3.等於div和100％身高的自舉

求購結果：

image

代碼到目前爲止：

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

我想我讀了所有現有的q問題和答案在這裏。
我試過html/body 100%,max-height,container-fluid,-9999px，但他們沒有工作。

我忘了提及，響應是至關重要的，在我的例子中，那些float：right（在最後DIV的css中）在小屏幕上變得非常大。

我的想法是使用引導到具有較小的屏幕少的問題，更簡單的頁面引導才使水平的DIV，所以我希望樁有這樣的事情

enter image description here

來源

2016-11-12 MarePannoniumGarden

+0

會發生什麼情況？請使用您的HTML，CSS和您正在使用的其他任何東西發佈JSFiddle的鏈接（如JavaScript） –

+0

讓我知道我的答案是否有效。如果是，請勾選綠色標記以表明其正確性。 –

+0

這應該這樣做：http://stackoverflow.com/questions/16390370/how-can-i-get-a-bootstrap-column-to-span-multiple-rows –

回答

1

，而無需修改引導電網 （額外的，因爲你不應該點響應例子不要修改網格，否則你將無法在任何情況下使用它）

我不得不更改你的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％。

My JsFiddle Live example

來源

2016-11-12 19:10:01 xWaZzo

+0

xWaZzo，看起來不錯，但是左右列在桌面和中央列上的寬度必須爲25％。在小屏幕上工作，看起來不錯:) – MarePannoniumGarden

+0

@MarePannonium花園我的壞，只是更新了左右'col-sm-4'到'col-sm-3'和中央一個到'col-sm-6'上html引導程序網格。我更新了我的答案。 – xWaZzo

+0

mea culpa，漫長的一天:(你的權利，只有3-6解決，tnx。小屏幕，樁是好的，比例是好的（中心更大），但行高，如何削減他們只有10 -15％（12,5％是最好的）屏幕高，剩下40-60％的中央部分？ – MarePannoniumGarden

1

這是一個很好的例子一個地方使用flex box！

在我看來，你正在採取一種基於行的方法。我認爲基於列的方法更合適。

當我設計一個網站時，我喜歡嘗試將它分解成正方形或矩形，這些正方形或矩形一直貫穿整個頁面的寬度或高度。

在我看來，這個設計有一個矩形穿過頁面的寬度，其中包含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>

來源

2016-11-12 17:43:51 RobertAKARobin

+0

羅伯特，你的解決方案看起來很好，除了在全屏幕，只用50％的身高？ – MarePannoniumGarden

+0

好點！我再次編輯它。 – RobertAKARobin

0

Fiddle

總之，你讓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：
引導。看小提琴。

來源

2016-11-12 18:04:10

+0

AllDani，需要在中央部分有一個DIV，屏幕高度爲100％。 – MarePannoniumGarden

+0

讓我試試。 –

0

我已經給你下面的代碼，它將從小型桌面到最大（桌面在所有情況下）的引導。至於你說你喜歡樁，當談到移動則乾脆不寫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>

來源

2016-11-12 18:53:29

相關問題

 相關問題