底部填充方法不適用於等高部分

我參考了以下文章，發現了底部填充方法。

我想在我的網頁應用此概念;但它不能正常工作。在正確的div上面有不需要的空間。我們如何糾正它？

enter image description here

CODE

<!DOCTYPE html> 

<style type="text/css"> 
    .myContent { 
     width: 100%; 
     border: 2px solid violet; 
     min-width: 1210px; 
    } 

    .myHeader { 
     width: 100%; 
     /*width: 1200px;*/ 
     clear: both; 
     background-color: #DFE8EF; 
     border: 1px solid red; 
    } 

    .leftPart { 
     border: 1px solid red; 
     width: 200px; 
     height: 200px; 
     float: left; 
     background-color: silver; 
    } 

    .rightPart { 
     border: 1px solid orange; 
     background-color: beige; 
     float: left; 
     min-width: 1000px; 
     /* 
     margin-bottom: -1000px; 
     padding-bottom: 1000px; 
     margin-right: -5000px; 
     padding-right: 5000px; 
    */ 
    } 
</style> 

<html> 
<head> 
    <title>UpdateAccrualByItem</title> 


    <link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 

    <div id="body"> 
     <div class="myContent"> 

      <div class="myHeader"> 
       <img src="/Images/logo_header.jpg" /> 
      </div> 

      <div class="leftPart"> 
       Menu 
      </div> 
      <div class="rightPart"> 

       <h2>UpdateAccrualByItem</h2> 
      </div> 

     </div> 
    </div> 

</body> 
</html>

來源

2013-08-21 Lijo

你很接近，但只是有一些小的東西是錯誤的。

您不需要右列的寬度，只需要默認width:auto。我使用了相同的負邊距和填充技巧，使右側立柱的高度達到左側高度的大小，同時也給右側立柱帶來了佔據剩餘空間的錯覺。您還應該漂浮正確的容器並帶走邊距。您可以刪除左欄的clear:both，因爲它不使用

Demo here

.leftPart { 
    border: 1px solid blue; 
    width: 200px; 
    height:200px; 
    float:left; 
    background-color: orange; 
} 
.rightPart { 
    border: 1px solid orange; 
    background-color: beige; 
    float:left; 
    margin-bottom: -1000px; 
    padding-bottom: 1000px; 
    margin-right: -5000px; 
    padding-right: 5000px; 
}

編輯

你也可以添加一些類型@media查詢來允許調整窗口看起來更流暢。 Here is an example。它在示例中基於文本長度進行了半硬編碼，但在最終產品上它可能是您在末尾添加的內容

來源

2013-08-21 18:40:30

對於取消標記答案的道歉。我更新了這個問題。它不適用於該佈局。我需要有最小寬度。任何解決方案？ – Lijo

因此，當窗口小於1200px時，右元素的最小寬度加上左元素的寬度，是否需要滾動條出現？你想隱藏窗外的內容嗎？你想要什麼樣的行爲？ –

當窗口寬度小於1200像素時，需要隱藏項目「隱藏」。 – Lijo

底部填充方法不適用於等高部分

回答

相關問題