使用一個div來限制另一個的大小

我有兩個div，'content-left'和'content-right'。內容左側div可以在高度上變化。內容權利div有一個不變的高度。使用一個div來限制另一個的大小

更新：左側內容不僅大小可能不同，而且大小可能因分鐘而異，具體取決於用戶的操作。

我希望有內容左側包含一個div滾動條。我不希望瀏覽器窗口本身具有滾動條。

我希望content-right div的內容始終可見。內容權利永遠不應該滾動頁面。

我想出了下面的代碼，但我認爲它可能會更好。

我在firefox和chrome中測試了這個。 Internet Explorer與我無關。

實質上，我只是「隱藏」左邊的div，確定右邊div的頂部和窗口大小之間的差異，並設置left-div的max-height屬性。滾動然後發生溢出：汽車

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    processLeftDiv(); 
}); 
$(window).resize(function() { 
    processLeftDiv(); 
}); 

function processLeftDiv() { 
     $('#content-left').hide(); 
     windowHeight = $(window).height() ; 
     positionTop = $('#content-right').position().top ; 
     $('#content-left').css('max-height', (windowHeight - (positionTop + 20))); 
      // the 20 is padding 
     $('#content-left').show(); 
} 
</script> 

<title>Test</title> 
<style type="text/css"> 

#header 
{ 
    width: 100%; 
    background: red; 
} 

#content-left 
{ 
    float: left; 
    margin-bottom: 5px; 
    width: 50%; 
    height: 100%; 
    max-height: 100%; 
    overflow: auto; 
    background: blue; 
    display:none; 
} 
#content-right 
{ 
    float: right; 
    width: 50%; 
    background: green; 
} 

</style> 
</head> 
<body> 
    <div id="header"> 
       Header 
      <p>Header stuff</p> 
    </div> 

    <div id="body"> 

     <div id="content-left"> 
       Content left 
      <p>Blah Blah</p> 
      <p>Blah Blah</p> 
      <p>Blah Blah</p> 
    repeated 100 times 
      <p>Blah Blah</p> 
      <p>Blah Blah</p> 
      <p>Blah Blah</p> 
      <p>Blah Blah</p> 
      <p>Blah Blah</p> 
     </div><!--close left div--> 

     <div id="content-right"> 
       Content 
      <p>Content stuff</p> 
     </div><!--close right div--> 

    </div><!--close body div--> 

</body> 
</html>

想法？

來源

2012-08-05 mark ee

你有沒有嘗試溢出：滾動左邊的div？ – 2012-08-05 18:43:04

Ulmar - 對不起，我更新了這篇文章。最初左邊的容器可能會打開一千條線，然後一秒鐘後可能會下降到兩條線。或者這可能會以相反的方式發生。左容器非常動態！ – 2012-08-06 15:53:46

沒有必要使用javascript複雜化，您只能使用CSS，更簡單。這裏是你如何做到這一點：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      body{ 
       border: 0; 
       margin: 0; 
       padding: 0; 
       outline: 0; 
      } 
      .header 
      { 
       width: 100%; 
       height: 100px; 
       background: red; 
      } 
      .wrapper 
      { 
       position: absolute; 
       top: 100px; 
       bottom: 0; 
       left: 0; 
       width: 100%; 
      } 
      .content-left 
      { 
       float: left; 
       width: 50%; 
       height: 100%; 
       overflow: auto; 
       background: blue; 
      } 
      .content-right 
      { 
       float: left; 
       width: 50%; 
       height: 100%; 
       background: green; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="header"> 
      <p>Header stuff</p> 
     </div> 
     <div class="wrapper"> 
      <div class="content-left"> 
       Content left 
      </div> 
      <div class="content-right"> 
       Content right 
      </div> 
</div> 
    </body> 
</html>

只是一些使用技巧，因爲你是一個新手：

始終嘗試使用類代替IDS在你的HTML/CSS，你的生活會更從長遠來看更簡單（ids應該只用於如果你想綁定一些javascript到一個元素，沒有其他好的理由imo）
總是使用一些CSS重置塊（我用這個最簡單的身體標籤）。我知道這只是一個例子，但在實際應用中這是必須的。谷歌它，有一些偉大的那裏。

來源

2012-08-05 18:52:45 Vexter

使用ID沒有錯，我發現它實際上幫助我快速查看ID並知道我只在一個區域使用過它，或者我知道如果我修改了一個class元素，那麼我可能也會影響另一個區域 – Andy 2012-08-05 21:39:39

Vexter - 實際上css/html是另一個例子中的剪切/粘貼（在我的防守中） - 我應該在我的帖子中提到左側容器是* HIGHLY *動態。它可能從兩條線開始，一分鐘後有數千條線。並且當頁面加載時我無法確定這些。 – 2012-08-06 15:47:26

這可以處理任何數量的文字/內容。也許你應該添加一個溢出：隱藏是安全的溢出。但除此之外似乎是你正在尋找的東西。如果是這種情況，請隨時接受我的回答;） – Vexter 2012-08-08 08:50:21

使用一個div來限制另一個的大小

回答

相關問題