使主标签高度100%为父正文高度？(CSS/HTML)[重复]

vwoqyblh 于 2023-03-14 发布在其他

关注(0)|答案(3)|浏览(148)

此问题在此处已有答案：

Make a div fill the height of the remaining screen space（42个答案）
Fill remaining vertical space with CSS using display:flex（6个答案）
3天前关闭。
下面是我的HTML的样子：

<html>
  <body>
    <header>...</header>
    <main>...</main>
  </body>
</html>

我的标题没有声明的高度，但它有内容，使它占据了大约10%的屏幕vh。
我希望能够将body标记设置为100vh，然后将main标记设置为100%，这样我就可以将main标记的内容居中显示在屏幕该部分的中心。
相反，发生的是主标记高度变得像标题下的另一个100vh，所以你必须向下滚动到主标记的底部。
我不希望发生这种情况。我只希望主标记填充父主体标记的高度，该标记在屏幕底部停止。我不希望必须向下滚动才能到达主标记的底部。我只希望将一个句子在屏幕上居中。相反，文本看起来更接近屏幕底部，而不是居中。因为主标签到达屏幕底部以下。
我该如何设计html页面的样式，使main标签只填充body标签的高度，而不填充其他内容呢？

css

来源：https://stackoverflow.com/questions/75690898/make-main-tag-height-100-the-parent-body-height-css-html

3条答案

按热度按时间

odopli941#

剩余空间

要使<main>占用<body>的剩余空间，可以用途：

CSS网格

CSS Grid允许我们定义一个网格布局和分配空间，通过声明<header>的行高为auto，我们可以用flexible lengths ( fr )：

body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

/*Ignore; for demonstrational purposes*/
body {margin: 0}
header {
  height: 2rem;
  background-color: red;
}
main {
  background-color: blue;
}

<body>
  <header></header>
  <main></main>
</body>

柔性盒

Flexbox允许我们沿着一个主轴来布置flex子节点，我们可以让一个子节点增长到用flex-grow property来填充这个主轴：
一个二个一个一个

居中文本

大而突出的部分“在折叠之上”通常被称为“英雄部分”、“英雄横幅”或类似的东西。
将out-of-flow header放置到hero部分时，可以通过absolute positioning then translating进行居中。

注意：根据上述内容，确保不要在标题后面放置任何（英雄）内容！

如果英雄部分与视口大小不一样，但您仍然希望其内容在视口中居中，则居中可能会变得棘手。
当使用CSS网格和place-items: center居中时，内容仅居中于其父项，而不居中于视口：

body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}
header {height: 4rem}
#hero {
  height: 100%;
  display: grid;
  place-items: center;
}

/*Ignore; for demonstrational purposes*/
body {margin: 0}
header {background-color: lightpink}
main {background-color: lightblue}

/*Center cross*/
body::before, body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
}
body::before {
  width: 2rem;
  height: 2px;
}
body::after {
  width: 2px;
  height: 2rem;
}

<body>
  <header></header>
  <main>
    <section id=hero>
      <span id=hero-content>Hero content</span>
    </section>
  </main>
</body>

但如果我们知道标题的（绝对）高度，那么我们可以考虑：

body {
  --header-height: 4rem;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}
header {height: var(--header-height)}
#hero {
  height: 100%;
  display: grid;
  place-items: center;
}

#hero-content {
  margin-top: calc(-1 * var(--header-height));
}

/*Ignore; for demonstrational purposes*/
body {margin: 0}
header {background-color: lightpink}
main {background-color: lightblue}

/*Center cross*/
body::before, body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
}
body::before {
  width: 2rem;
  height: 2px;
}
body::after {
  width: 2px;
  height: 2rem;
}

<body>
  <header></header>
  <main>
    <section id=hero>
      <span id=hero-content>Hero content</span>
    </section>
  </main>
</body>

赞(0）回复(0）举报 2023-03-14

lfapxunr2#

问题在于，当您设置main {height: 100%;}时，百分比引用包含的块，即body本身。
要实现您想要的，请将body设计为Flexbox，并允许main增长。

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  border: 10px solid red;
  box-sizing: border-box;
}
header {
  background: lime;
}
main {
  background: cyan;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
  <header>A<br>B<br>C<br></header>
  <main>Content</main>
</body>

赞(0）回复(0）举报 2023-03-14

oymdgrw73#

@BrettDonald的解决方案不错;我最初读你的问题是因为你想让文本在屏幕上居中，而不是在<main>标签中，这将涉及到滚动条的某种绝对或固定位置。在重读这个问题时，我仍然不确定你到底在搜索什么，但我已经做了这个例子来让文本在屏幕上居中，而不是在<main>标签中，所以你可以开始了。

header{
  position: absolute;
  padding-top: 20px;
  top: 0;
  width: 100%;
  height: 50px;
  text-align: center;
  background: lightblue;
}

main{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body{
  position: relative;
  height: 100vh;
}

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

<html>
  <body>
    <header>header content</header>
    <main>
      <text>this sentence should be centered</text>
    </main>
  </body>
</html>

赞(0）回复(0）举报 2023-03-14

我来回答

使主标签高度100%为父正文高度？(CSS/HTML)[重复]

3条答案

剩余空间

CSS网格

柔性盒

居中文本

相关问题

热门标签

最新问答