調整div以適合肖像模式

Hellow我的網站有問題。我編碼響應式佈局，我有肖像模式的問題。我的網站在這裏 - www.szafortest.pl調整div以適合肖像模式

你可以在網頁瀏覽器中檢查css和html代碼。如果你想我可以把代碼放在這裏。我的問題是我有很大的白色邊緣。請參考下面的圖片。 enter image description here

我想要做的是調整「textContent」類的大小。我嘗試使用視口，但總是我可以找到設備，這將嚴重顯示此網站。

你知道它有什麼好的解決方案嗎？

2015-05-24 user3388384

你看過[flexbox]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）嗎？ –

正如James Newton在評論中建議的那樣，您可以使用flexbox來解決這個問題。我有一個庫，允許我使用flexbox將元素定位在行和列中。它們被命名爲flex-row和flex-column。名字應該說明問題。還有一個更重要的類叫autoflex。它允許我均勻地填充div或size div的剩餘空間。這是一個解決方案，您可以嘗試：
HTML：

<body class="flex-column"> 
    <div class="yourContent"></div> 
    <div class="autoflex"></div> <!--This will fill all whitespace --> 
</body>

CSS：

.flex-column { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
} 

.flex-row { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
} 

.autoflex { 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto; 
}

編輯
這些類僅支持標準和WebKit瀏覽器。爲了使其與其他瀏覽器更加兼容，您應該將-moz-flex添加到屬性中。

來源

2015-05-24 15:03:35 DevNebulae

調整div以適合肖像模式

回答

相關問題