棘手的CSS佈局

因此，我正在製作一個相當有問題的佈局網站。用黑塊表示四個角落圖像TL，TR，BL和BR。深橙色區域是主要內容（寬度爲960像素），外部區域用綠色箭頭表示爲瀏覽器窗口。見圖：棘手的CSS佈局

Diagram http://dotcafedesigns.com/stackoverflow/problem.gif

頂部圖像表示在其最窄可能的位點 - 它不應該被允許比這窄的（960像素），如果它比定義的面積大，應該沒有滾動條。底部的兩張圖片代表不同的瀏覽器寬度。

除非寬度降至960像素，否則底部左側和右側的黑塊（圖像）應始終位於屏幕的左下角和右側，在這種情況下，BL和BR圖像應插入主區域略。如果網站縮小到200px，BR圖像不應該仍然在右上角。在這一點上，我並不真正關心它在IE6中的工作情況（我可以粗略地工作），但我甚至無法弄清楚如何完全沒有Javascript或極其實驗性的CSS。目前，我正在使用絕對定位的div來完成哪種工作，但工作不太正確。

我想我會願意接受一點JS如果沒有其他方式，但我寧願不。

非常感謝！

來源

2010-03-07 Meep3D

男人，你有一些瘋狂的佈局正在進行！：D – 2010-03-07 20:42:45

我知道，真的讓自己失敗與這一個。 :( – Meep3D 2010-03-07 20:47:48

注意：我會獎勵這個問題，並將它提供給誰答案，你必須等待24小時左右，然後才發出賞金不幸（或者我現在會這樣做），但我會等待那麼久，做到這一點，然後標記你作爲正確的答案。謝謝！ – Meep3D 2010-03-07 20:49:25

無需使用Javascript。至少在大多數現代瀏覽器中。使用簡單的定位和一個@media查詢我把它關閉：

<head> 
    <style type="text/css" media="screen"> 
    body { 
     margin: 0; 
     padding: 0; 
     font-family: sans-serif; 
     background: orange; 
     text-align: center; 
     color: black; 
     overflow-x: hidden; 
    } 
    #content { 
     width: 960px; 
     margin: 0 auto; 
     padding: 20px 0; 
     min-height: 800px; 
     background: #cc6600; 
     z-index: 0; 
    } 
    .image { 
     background: black; 
     color: white; 
     height: 60px; 
     width: 100px; 
     padding: 20px 0; 
     z-index: 1; 
     opacity: .95; 
    } 
    #top { 
     width: 960px; 
     margin: 0 auto; 
     position: relative; 
     overflow: visible; 
    } 
    #top .image { 
     position: absolute; 
    } 
    #top .left { 
     left: -80px; 
    } 
    #top .right { 
     right: -80px; 
    } 
    #bottom { 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     height: 100px; 
    } 
    #bottom .image { 
     position: absolute; 
    } 
    #bottom .left { 
     left: 0; 
    } 
    #bottom .right { 
     right: 0; 
    } 

    @media all and (max-width:1120px) { 

     #container { 
     width: 960px; 
     margin: 0 auto; 
     position: relative; 
     overflow: visible; 
     } 
     #bottom .left { 
     left: -80px; 
     } 
     #bottom .right { 
     right: -80px; 
     }  

    } 
    </style> 
</head> 
<body> 
    <div id="top"> 
    <div class="left image">left image</div> 
    <div class="right image">right image</div>  
    </div> 
    <div id="content"> 
    content 
    </div> 
    <div id="bottom"> 
    <div id="container"> 
     <div class="left image">left image</div> 
     <div class="right image">right image</div> 
    </div> 
    </div> 
</body>

可能屬於你的「極端實驗CSS」的描述下，但我想你會被它確實多少支持有驚訝，並使用JS輕鬆啓動它很容易 - 只需在重新調整大小時檢查瀏覽器寬度，並在寬度低於1120px時添加額外的CSS。

來源

2010-03-09 08:01:15

是的，媒體查詢是要走的路。支持是除IE之外的所有現代瀏覽器，但如前所述，很容易檢查媒體查詢支持，然後添加js。 – 2010-03-09 08:09:30

真的很酷，但你如何使它在IE下工作？ – van 2010-03-16 00:41:48

這裏有一個選項：http://www.protofunc.com/scripts/jquery/mediaqueries/ - 另一種選擇是在條件註釋中添加一些JS來檢查瀏覽器窗口寬度（例如：$（window） .resize（function（）{if $（window）.width（）> 1120px {...做這個...};}）;用jQuery）並根據需要更改CSS（例如'$（'＃container '）.css（'width'：'960px'，'margin'：'0 auto'）;'再次使用jQuery）。 http://api.jquery.com/css/ – 2010-03-16 07:35:07

唯一真正棘手的部分是底部。它的日休息是非常簡單的：

<body> 
    <div id="container"> 
     <div id="header"> 
      <div class="right"></div> 
      <div class="left"></div> 
     </div> 

     <div id="footer"> 
      <div class="right"></div> 
      <div class="left"></div> 
     </div> 
    </div> 
</body>

CSS：

#container { 
    margin: 0 auto; 
    width: 960px; 
} 

#header { 
    position: relative; 
} 

#header .right, #header .left { 
    position: absolute; 
    width: 100px; 
} 

#header .right { 
    left: 940px; /* leaves 20px inside the #header */ 
    background: url(images/header_right.gif) no-repeat; 
} 

#header .left { 
    left: -80px; /* leaves 20px inside the #header */ 
    background: url(images/header_left.gif) no-repeat; 
}

而對於#footer一些類似的東西，但你需要使用JavaScript的一點點檢測窗口寬度和稍微調整left。

來源

2010-03-07 20:48:30 davethegr8

我有類似的東西 - 問題是正絕對定位#header .right導致滾動條。我甚至可以忍受這一點，但是腳註不會打球。 :( – Meep3D 2010-03-07 20:51:54

@ meep3d - 我無法測試這個，但試着在body標籤上設置'overflow-x：hidden;'，它可以通過隱藏元素（或元素的一部分）來擺脫滾動條的問題在body元素之外），這聽起來反直覺，但它可能工作，如果沒有，張貼一些代碼，所以我們可以採取一個裂縫 – davethegr8 2010-03-08 05:52:22

不會隱藏所有的水平滾動條？ – Meep3D 2010-03-08 08:32:22

是這樣的嗎？如果你願意的話，你可以用類似的JQuery代碼來代替JavaScript代碼，只是想說明這個如何工作。

<html> 
<head> 
    <title>....</title> 

    <style type="text/css"> 
    html 
    { height: 100%; margin: 0; background: white; } 
    body 
    { height: 100%; width: 960px; margin: 0 auto; background: gray; overflow: hidden; } 
    #main 
    { margin: 0px; padding: 5px 20px; position: relative; } 

    #headLeft 
    { position: absolute; top: 0px; left: -80px; 
    width: 100px; height: 35px; background: green; } 
    #headRight 
    { position: absolute; top: 0px; right: -80px; 
    width: 100px; height: 35px; background: green; } 
    #footLeft 
    { position: absolute; bottom: 0px; left: 0px; 
    width: 100px; height: 35px; background: green; } 
    #footRight 
    { position: absolute; bottom: 0px; right: 0px; 
    width: 100px; height: 35px; background: green; } 
    </style> 

    <script type="text/javascript"> 
    function checkSize (event) 
    { 
    var contentWidth = 960; 
    var minOuterBoxSize = 60; // maximum 100-60=40 px will be displayed inside the main area 

    if (window.innerWidth - contentWidth < minOuterBoxSize * 2) 
    { 
     var pos = ((minOuterBoxSize * 2) - window.innerWidth + contentWidth)/2; 
     document.getElementById('footLeft').style.left = '-' + pos; 
     document.getElementById('footRight').style.right = '-' + pos; 
    } 
    else 
    { 
     document.getElementById('footLeft').style.left = '0px'; 
     document.getElementById('footRight').style.right = '0px'; 
    } 
    } 
    </script> 
</head> 

<body onload="checkSize(event);" onresize="checkSize(event);"> 
<div id="main"> 
    <div id="headLeft">TL</div> 
    <div id="headRight">TR</div> 

    <p>Normal content</p> 
</div> 

<div id="footLeft">BL</div> 
<div id="footRight">BR</div> 
</body> 
</html>

來源

2010-03-07 21:41:51 poke

將JavaScript放在'window.onload'事件中。 – 2010-03-07 21:53:24

呃...它是在一個onload事件.. – poke 2010-03-07 21:57:31

棘手的CSS佈局

回答

相關問題