Question

我想在下面的布局中制作两个特定的列，拉伸整个页面高度，除非他们在移动设备上（平板电脑他们仍然可以伸展，因为大多数平板电脑都是720.

   <div class="rows">
     <div class="col-md-1">
     </div>
     <div class="col-md-10">
     </div>
     <div class="col-md-1">
     </div>
    </div>

col-md-1，现在只延伸到您放入其中的内容，我希望如何，在高于720的任何内容上拉伸页面的全高，即它们应该延伸对于页脚，然后在小于720的任何东西上，它们应该只是常规的高度盒子，即“伸展以适应其内容”

如何在不破坏默认引导行为的情况下实现这一目标。

Answer 1

1）在HTML中为要增加页面高度的div添加一个新类

2）在CSS中，使用最小宽度为720px的@ media-screen，这样您只能为非移动设备指定此项，并且在新类中指定min-height为100％。见下文..

@media screen and (min-width: 720px){
.new-class {
    min-height:100%; }}

使特定列拉伸页面高度

1 个答案: