Div儘管可用空間下降

我準備在我的頁面尖叫，感覺像是一場真正的戰鬥。我正在嘗試爲html應用程序獲取完整頁面佈局。我試圖讓兩個主要的div並排，我可以用js隱藏。我在每個div內都有一個44px的標題。我的問題是，我似乎無法阻止大量內容流入第一個div，即使溢出隱藏等。我無法發佈所有代碼，但我應該可以發佈相關部分。大部分代碼與問題無關。爲了更容易看到，我製作了JSfiddle。提前致謝。哦，還有一些關於讓我的投票回答的提示。不要試圖改變列的寬度，我需要它們靈活的邊界。提前致謝！Div儘管可用空間下降

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="style.css" rel="stylesheet"> 
    <title>Stack Overflow</title> 
</head> 
<body> 
    <div id="page-holder"> 
     <div id="main-menu" class ="menu-width"> 
      <div class="wide vert-center-right header large"> 
       <div> 
       <input id="search" type="text" class="search"/> 
       <img class="visible-phone" src="css/images/logo.png" /> 
       </div> 
      </div> 
      <div id="menu-body" class="menu-body"> 
       <button class="wide small vert-center-left">Push Me</button> 
      </div> 
     </div> 
     <div id="main-view" class="view-width"> 
      <div id="view-header" class="header view-header vert-align-left"> 
       <a href="#" class="visible-phone" onclick="resized()"><img class="plain" src="css/images/header-icon-back-18x18.png"/></a> 
       <img src="css/images/header-logo.png" /> 
      </div> 
      <div id="view-body" class="view-body"> 
       Large block of text that I want to not wrap into menu column. Large block of 
       text that I want to not wrap into menu column. Large block of text that I want 
       to not wrap into menu column. Large block of text that I want to not wrap into 
       menu column. Large block of text that I want to not wrap into menu column. 
       Large block of text that I want to not wrap into menu column. Large block 
       of text that I want to not wrap into menu column. Large block of text that 
       I want to not wrap into menu column. Large block of text that I want to not 
       wrap into menu column. Large block of text that I want to not wrap into menu 
       column. Large block of text that I want to not wrap into menu column. Large 
       block of text that I want to not wrap into menu column. Large block of text 
       that I want to not wrap into menu column. Large block of text that I want to 
       not wrap into menu column. Large block of text that I want to not wrap into 
       menu column. Large block of text that I want to not wrap into menu column. 
       Large block of text that I want to not wrap into menu column. 
      </div> 
     </div> 
     <div style="clear:both"></div> 
    </div> 
</body> 
</html>

來源

2013-03-07 rickstockham

那是因爲你只浮動#main-menu而不是#main-view。在這種情況下，#main-view的內容將圍繞#main-menu項目。

如果您想停止左側菜單下方左側的內容，只需指定一個浮點數到#main-view，或使用相當於寬度加上右邊距#main-menu的填充。

對於後者的解決方案：

$(document).ready(function() { 
    var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */ 

    $("#main-view").css({ 
     "padding-left": offset_left 
    }); 
});

http://jsfiddle.net/teddyrised/gGt9S/3/

[編輯]：您可能需要使用各種MIN-重新計算你的光當瀏覽器大小的所有像素值，和最大寬度以及更響應的佈局。要做到這一點，只是包裝上面的代碼中.resize()功能：

$(document).ready(function() { 
    $(window).resize(function() { 
     // Calculate the necessary offset 
     var offset_left = $("#main-menu").width() + parseInt($("#main-menu").css("marginRight")); /* Also added the calculated right margin (currently 0), just in case you decided you want more spacing between the menu and content */ 

     // Assign left offset as padding 
     $("#main-view").css({ 
      "padding-left": offset_left 
     }); 
    }).resize(); 

    // Note: we fire resize() once when the window loads so that everything is calculated properly the first time the page loads (because by default, resize() is not triggered upon page load) 
});

http://jsfiddle.net/teddyrised/gGt9S/4/

爲了完整起見，你可能要考慮如何debounce的.resize()事件 - 就像Chrome瀏覽器，打響事件持續發生，當用戶拖動窗口的調整大小手柄時，可能會影響較慢計算機上的瀏覽器性能，或者如果.resize()函數中的計算過多。

來源

2013-03-07 18:33:18 Terry

嗯，我不能夠複製這一結果與浮子＃主視圖，至少不會在IE中，我的猜測是不是文本最好的瀏覽器進行測試，除了我希望也能夠將其用於Windows 8應用程序，我很確定使用ie引擎。至於填充，由於菜單列的min，max和％，就我所知，這不是css可解的。你能編輯我的jsfiddle來顯示你的工作解決方案嗎？ – rickstockham 2013-03-07 18:52:04

在試圖修復寬度時，您仍然可以使用填充 - 只需使用「box-sizing：border-box」即可。 ;）剛剛編輯我的答案，檢查新的小提琴。 – Terry 2013-03-07 18:55:10

我不確定你是否與視圖大小混淆，但這不是一個正確的解決方案。如果我可以用桌子做，我會很開心，但內容會變得瘋狂。我知道它是一個棘手的問題，它可能需要一個沉重的JS解決方案。 – rickstockham 2013-03-07 19:06:44

我不確定這是否適合您，但爲您的div設置高度將幫助您實現自己想要的效果。我已將min-height設置爲某個值，並且設置height:auto以在有更多數據時提供幫助。它避免流入菜單部分這是的jsfiddle http://jsfiddle.net/gGt9S/2/

來源

2013-03-07 18:36:40 Ron

這不適用於大塊文本或頁面寬度減小。無用的文本塊的目的是爲了證明這一點。好鏡頭，它隱藏了一些文本塊的問題，但它不是一個解決方案。 – rickstockham 2013-03-07 18:49:41

Div儘管可用空間下降

回答

相關問題