1. 首页
  2. 问答
  3. 等于div和100％身高的自举

等于div和100％身高的自举

2016-11-12 31 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

相关问题

 相关问题