兩列，全高，響應式佈局。使用哪個框架？

-3

我想建立一個兩列全高（vieport的100％）佈局的網站。左列應包含固定高度的導航和特定的背景。右欄應包含不同的背景和主要內容。兩列，全高，響應式佈局。使用哪個框架？

我玩弄Bootstrap和基金會，但都似乎使這種背景/列的組合很難設置。我爲jQuery找到了一些解決方案，但是imho會爲首先不應該很難實現的事情引入另一層可能的混淆。

在我走之前，只是推出我自己的css：有沒有一種簡單的JS方式存檔，看起來在Bootstrap，Foundation還是任何其他完全成熟的框架？我希望能夠在主要內容中使用列，選項卡等，這樣一個框架可以爲我節省很多編碼。

謝謝！

來源

2012-11-05 The Great Grabowski

設置基本佈局不「很多編碼「，使用一個框架來說你可以手動完成的事情對於下載速度，可維護性等是不值得的。只需自己寫下 – Andy

我試過Bootstrap和其他一些網格系統，它們只在你要編寫更復雜的網站時纔有用。如果你只需要兩列，那肯定是矯枉過正的。

例如，這個花了我2分鐘的設置，似乎回答您的要求： http://jsbin.com/abeciz/1/edit

來源

2013-04-28 22:56:56 Tyblitz

如果內容大於視口並且需要滾動，則不起作用。 –

使用CSS表，很容易做到。但Chrome需要技巧。

舉例： CSS：

/* important */ 
*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#test { 
    background: #ddd; 
    display: block; /* important */ 
    margin: 0; 
    /* max-width: 400px; */ 
    min-height: 0; /* important */ 
    overflow: hidden; /* important */ 
    padding-bottom: 20px; 
    width: 100%; 
} 

#test .twoColumnLayout { 
    display: table; /* important */ 
    height: 100%; /* important */ 
    margin-top: 20px; 
    min-height: 10px; /* necessary for IE */ 
} 

/* important, but only for IE, for others the row doesn't need to be present */ 
#test .twoColumnLayout .row { 
    display: table-row; 
    height: 100%; 
} 

#test .twoColumnLayout .col { 
    display: table-cell; /* important */ 
    height: 100%; /* important */ 
    text-align: center; 
    width: 50%; /* for 2 columns */ 
} 

#test .twoColumnLayout .col > .content { 
    background: #fff; 
    border: 1px solid #e5e5e5; 
    border-radius: 3px; 
    height: 100%; /* important */ 
    margin: 0 10px; 
    padding: 20px; 
    position: relative; 

    /* webkit fix!!! */ 
    -webkit-box-sizing: content-box; /* necessary for Chrome!!! */ 
}

和HTML對CSS以上：

<section id="test"> 
    <div class="twoColumnLayout"> 
    <div class="row"> 
     <div class="col"> 
     <div class="content"> 
      Some content here, little bit shorter... 
     </div> 
     </div> 
     <div class="col"> 
     <div class="content"> 
      Some content here, little bit longer. Some more content here, so it's even longer... 
     </div> 
     </div> 
    </div> 
    </div> 
</section>

鏈接的jsfiddle： https://jsfiddle.net/slonisko/xmL5jjct/2/

來源

2016-07-14 08:47:16

兩列，全高，響應式佈局。使用哪個框架？

回答

相關問題