等高列背景填充多頁

的一半有興趣的人，最終代碼：http://jsfiddle.net/asaxdq6p/6/等高列背景填充多頁

我想達到這樣的效果： http://maciej.kuzniczysko.pl/images/stackoverflow-1.jpeg

我我正在使用Equal Height Columns with Cross-Browser CSS詭計有兩列相同的高度。

問題是我不會使用JS（邊欄寬度）或CSS3（calc）。這將是一個主要面向老年人的網站，即使人們使用舊瀏覽器/不使用JS（因爲它往往在老年人的波蘭），它必須按預期工作。
此外，它必須正確的結構（我的意思是文本瀏覽器將像目前這樣邏輯顯示）。
問題是，這可能嗎？

最大頁面寬度爲1400px，它以margin auto爲中心。
第一欄是側邊欄，即頁面寬度的28.5％（當頁面達到1400px時爲400px），沒有固定寬度（通常是建立響應式網站時的300-400px）。
第二列是內容區域，即71.5％（其餘部分，最大爲1000px）。

我想要什麼？
要在屏幕上的側邊欄後面開始背景 - 所以它總是超過正文的50％+頁面中心和端側欄位置之間的差異。

它必須準確開始在期望的位置到期等高度列（否則它會覆蓋側欄的背景）。
然後它可能溢出，我不在乎。

Problem是頁中心和端邊欄位置之間的差異是不固定的，這樣我將其設置爲300像素（1400px/2 = 700像素; 700像素 - 400像素= 300像素），它的破碎時頁面具有小於1400px寬度。

好吧，說太多了。
還有JSFiddle我在說什麼，至今我做了（當然有評論）。

或者我可以設置一些height: 100%與position: relative，通過將側邊欄的身體背景色設置爲側欄來使側欄封面有一點背景。
但我不確定這是唯一的方法。

在此先感謝您的每一個建議或建議！

來源

2015-07-19 odie2

是this你試圖實現什麼？

HTML

<div class="wrapper"> 
    <div class="sidebar"></div> 
    <div class="main"> 
    <div class="content"></div> 
    </div> 
</div>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
html, 
body { 
    height: 100%; 
} 
.wrapper { 
    height: 100%; 
    width: 100%; 
    margin: 0 auto; 
    max-width: 1400px; 
} 
.sidebar { 
    height: 100%; 
    width: 28.5%; 
    background-color: gray; 
    float: left; 
} 
.main { 
    float: left; 
    width: 71.5%; 
    height: 100%; 
    background: url("http://www.etapetki.com.pl/wp-content/uploads/2014/01/kosmos.jpg") 0 50%/cover no-repeat fixed #787878; 
    padding: 5%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.content { 
    width: 100%; 
    height: 100%; 
    background-color: gray; 
}

您也可以從.content

來源

2015-07-20 00:02:12 Cheslab

刪除height: 100%可能是我弄錯了，你的想法是像[這裏]（HTTP：（我減少了jsfiddle的寬度，對於真正的網站你應該改變它：'.sidebar .content {max-width：400px;}'和'.main .content {max -width：1000px;}'） – Cheslab

謝謝，來自評論的看起來不錯。 [編輯]（http://jsfiddle.net/asaxdq6p/4/）並添加了響應（有3個州 - 移動背景，「平板電腦」與背景和計算機 - 這是你的），使我的合作者看到它。它不是完美的中心，但在我看來它更好 - 在大屏幕上可以看到更多背景。如果他批准，我會將答案標記爲已接受。 – odie2

啊，我也必須修復溢出。 – odie2

等高列背景填充多頁

回答

相關問題