gpt4 book ai didi

css - 在文档高度内安装两个

转载 作者:行者123 更新时间:2023-11-28 10:00:03 25 4
gpt4 key购买 nike

我正在尝试布局一些 html <div>图片中的元素:

layout

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

我尝试将其设置为 90%(#title 为 10%),但它并不准确,具体取决于客户高度;我到目前为止是这样的:

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

考虑到#title 高度也可能不同,是否可以使用 css 来适应 #title#container在 html 里面?

最佳答案

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

如果您知道在任何给定情况下您的 header 将是什么,您可能会更容易地解决这个问题。在这种情况下,您可以像这样使用 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 来显示 flexbox。

看起来像这样:

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-directionflex-wrap。这些属性应该是不言自明的。

其次我们将标题设置为固定显示。我们通过 height: 10% 来做到这一点,但是这个值可以是你想要的任何值。 flex: none 告诉浏览器这个元素在 flex 的上下文中是不可变的。如果您将显示器想象成一条河流,那么这就是坐在河中间的一 block 石头。

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

  1. 相对于所有其他 flex 元素增长到 1 (100%) 的系数(在这个简单的例子中没有)。
  2. 根本不收缩(收缩到 0 倍数)。
  3. 将默认高度设置为 100%(或尽可能接近它)。

希望对您有所帮助!

关于css - 在文档高度内安装两个 <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30359658/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com