如何強制這個div跨越視口的高度？

這個jsFiddle顯示了這個問題。我還沒有設法阻止div0 div與其同級兄弟div1的頂部邊緣「摺疊」。（以下HTML）如何強制這個div跨越視口的高度？

我想div0跨越整個視口垂直，紅色rect裏面出現對視口的左上角齊平。（中div1及其內容的佈置是完全一樣的需要，並且不應該以任何方式被改變。）

我試圖通過把兩個div0和div1周圍的邊框禁用利潤的崩潰，但是，作爲的jsfiddle顯示，這沒有什麼區別。

下面是相關的HTML：

<!doctype html> 
<body> 
    <div id="div0"> 
     <svg id="svg0" width="50px" height="50px"> 
      <g> 
       <rect x="0px" y="0px" 
         width="50px" height="50px" style="fill:red;"></rect> 
      </g> 
     </svg> 
    </div> 

    <div id="div1"> 
     <div id="div2"> 
      <svg id="svg1" width="100px" height="100px"></svg> 
     </div> 
    </div>

來源

2013-11-05 kjo

#div0 { 
height:100vh; 
}

您可以使用視口的高度VH。

來源

2013-11-05 02:53:23 jono

有趣的想法，但你在我提供的jsFiddle中測試過它嗎？（這就是提供jsFiddle的意義，你知道......） – kjo

以下是您的解決方案。我添加了一個.wrapper類，其中包含一個absoluteposition，以包含元素並在文檔中保持彈性。我還將overflow: hidden添加到您的div0 ID中，以防止紅色svgrect流出包含div的紅色。

這裏是一個更新的>>>JSFiddle<<<

HTML：

<div class="wrapper"> 
    <div id="div0"> 
     <svg id="svg0" width="50px" height="50px"> 
      <g> 
       <rect x="0" y="0" width="50px" height="50px"></rect> 
      </g> 
     </svg> 
    </div> 
    <div id="div1"> 
     <div id="div2"> 
      <svg id="svg1" width="100px" height="100px"></svg> 
     </div> 
    </div> 
</div>

CSS：

body { 
    margin: 0; 
    padding: 0; 
} 
.wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    border: 1px solid blue; 
} 
#div0 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 30%; 
    height: 100%; 
    background-color: yellow; 
    border: 1px solid blue; 
    overflow: hidden; 
} 
#div1 { 
    margin-top: 20px; 
    border: 1px solid green; 
    background: lightgray; 
    min-height: 27px; 
    display: -webkit-flex; 
    display: flex; 
} 
#div2 { 
    background: black; 
    margin: 0px auto; 
} 
rect { 
    fill: red; 
}

來源

2013-11-05 03:31:53

有趣的是：你的解決方案有效，但不是你描述的原因，因爲在你的CSS中使用選擇器'.wrapper'，而在你的HTML中' id = wrapper'，而不是'class = wrapper'。 IOW，'.wrapper'的CSS沒有任何影響。我最終發現（並且剛發佈）了一個解決方案（我認爲）更接近標準。 – kjo

OK，我找到了解決辦法：註釋掉CSS的position:relative爲body。這在原始小提琴的this revision中進行了說明。請注意，這和原來的小提琴之間的唯一區別就是剛纔提到的註釋線。

（我很慚愧地說，我發現通過雙盲試驗和錯誤的這個解決方案。我不爲什麼新版本的作品和原來的沒有想法）

來源

2013-11-05 11:47:57 kjo

如何強制這個div跨越視口的高度？

回答

相關問題