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尽管可用空间下降

回答

相关问题