在文档高度内安装两个<div>

Question

我试图将一些html <div>元素布局为如下图所示：

这里的问题是 #container height 。将其设置为固定值或百分比，它将在底部留下空白空间或绕过html高度。

我尝试将其设置为90％（10％用于#title）但是在客户端高度上没有准确的降低; 到目前为止我所拥有的是：

body, html{ height: 100%; margin: 0px}
#container{ height: 90%; overflow: scroll;}

考虑 #title height也可能会有所不同，是否可以使用css在html中填入#title和#container？

Answer 1

有两个选项，flex显示或CSS calc运算符。

如果你知道在任何特定情况下你的标题是什么，你可能更容易解决这个问题。在这种情况下，您可以像这样使用calc：

header {
  height: 190px; /* Or whatever you'd like it to be */
}
.container {
  height: calc(100% - 190px); /* Where 190px is whatever height the header is set to */
  overflow: auto; /* Or scroll, if you want the scrollbar always visible */
}

在不太理想的情况下，您需要使用flex进行弹散框显示。

这看起来像这样：

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
header {
  height: 10%; /* Or whatever */
  flex: none;
}
.container {
  align-self: flex-end;
  flex: 1 0 100%;
}

让我们来看看那一个。如果您需要更广泛的支持，它缺少大多数特定于供应商的内容，但现在几乎所有主流浏览器都支持flex显示。

首先我们将body设置为display: flex，告知浏览器这是flex布局。我们还设置了flex-direction和flex-wrap。这些属性应该是不言自明的。

第二次我们将标题设置为固定显示。我们通过height: 10%来做到这一点，但价值可能是你想要的。 flex: none告诉浏览器这个元素在flex的上下文中是不可变的。如果你认为显示器是河流，那就是坐在它中间的一块石头。

第三次我们将容器设置为使用align-self: flex-end在页面底部对齐。无论页面上的其他元素如何，它总是位于底部。这不是非常重要，因为我们没有包装（在body元素中设置）但我们在这里覆盖了基础。重要的部分是flex: 1 0 100%。简单地说就是这样说：

1. 相对于所有其他弯曲元素，增长到1（100％）因子（在这个简单的情况下没有）。
2. 根本不缩小（缩小到0）。
3. 设置默认高度100%（或尽可能接近它）。

希望有所帮助！

Answer 2

您可以设置overflow: scroll #container或#title，而不是在position: fixed;设置position: absolute;，而#container为margin-top #title }等于overflow: scroll高度的那个。

我总是会在#title { height: 190px; left: 0; position: fixed; right: 0; top: 0; } #container { margin-top: 200px; } 上建议这条路线，并尽可能使用浏览器的内置页面滚动。

提议的CSS：

    $('#txtSearch').on('keyup', function () {
        if ($(this).val() != "") {
            $('#menuSearchResults').html("");
            $("a.menuItem:contains('" + $(this).val() + "')").each(function () {
                if ($(this).data('toggle')) {
                    $('#menuSearchResults').append('<a href="#" data-toggle="modal" data-target="' + $(this).data('target') + '" id="' + $(this).prop('id') + '">' + $(this).text() + '</a><br>');
                } else {
                    $('#menuSearchResults').append('<a href="' + $(this).prop('href') + '">' + $(this).text() + '</a><br>');
                }
            });
        } else {
            $('#menuSearchResults').html("");
       }
    });

Answer 3

不完全确定您的问题是什么，但如果您知道title的高度，您可以轻松地创建它（使用百分比）：

html
{
    height: 100%;
}

body
{
    height: 100%;
    margin: 0;
    padding: 0;
}

#title
{
    background: green;
    height: 10%;
}

#container
{
    background: red;
    height: 90%;
    overflow: scroll;
}

#gallery
{
    background: blue;
    height: 5000px;
    margin: 10px auto;
    width: 70%;
}

<div id="title"></div>
<div id="container">
    <div id="gallery">
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling<br>
        scrolling
    </div>
</div>

JSFiddle

height: calc(100% - 100px)使用#container，如果#title的高度设置为像素。

如果#title的身高未知，可以使用display: table和display: table-cell（或flex，如果您有冒险精神），可以解决问题。