如何将容器 DIV 的高度设置为窗口高度的 100%？

发布于 2024-12-20 21:26:07 字数 475 浏览 1 评论 0原文

我的容器 DIV 有一些问题。其一，它无法正确识别我的内容的高度（我本以为它会超出主要内容和侧边栏的底部，但事实并非如此）。您可以在此页面上了解我的意思。

我还希望容器 DIV 始终填充屏幕/窗口的可用高度。我尝试将其设置为 min-height:100%，但这没有任何效果。

这是我用于容器 DIV 的 CSS：

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

如果您能提供任何帮助以使其正常工作，我将不胜感激。

谢谢，

尼克

原文

I have a couple of problems with my container DIV. For one it is not recognising the height of my content correctly (I would have thought it would extend beyond the bottom of the main content and sidebar, but it isn't). You can see what I mean on this page.

I would also like the container DIV to always fill the available height of the screen/window. I have tried setting it to min-height:100%, but this didn't have any effect.

Here is the CSS I am using for the container DIV:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

I would be grateful for any help to get this working.

Thanks,

Nick

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尐籹人 2024-12-27 21:26:07

将其添加到您的 css 中：

html, body {
    height:100%;
}

如果您说 height:100%，则表示“父元素的 100%”。如果父元素没有指定高度，则不会发生任何事情。你只在body上设置100%，但你还需要将它添加到html中。

Add this to your css:

html, body {
    height:100%;
}

If you say height:100%, you mean '100% of the parent element'. If the parent element has no specified height, nothing will happen. You only set 100% on body, but you also need to add it to html.

回复收藏 0 原文

木槿暧夏七纪年 2024-12-27 21:26:07

您可以将其设置为查看高度

html, body
{
    height: 100vh;
}

You can net set it to view height

html, body
{
    height: 100vh;
}

回复收藏 0 原文

雨后彩虹 2024-12-27 21:26:07

你设置CSS了吗：

html, body
{
    height: 100%;
}

你需要这个才能让div占据所有空间。 :)

Did you set the CSS:

html, body
{
    height: 100%;
}

You need this to be able to make the div take up all the space. :)

回复收藏 0 原文

落花随流水 2024-12-27 21:26:07

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

html 高度 (%) 将处理 height 大于 屏幕的 100% 的文档高度view 而 body 视图高度 (vh) 将处理小于屏幕视图高度的文档高度。

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

The html height (%) will take care of the height of the documents that's height is more than a 100% of the screen view while the body view height (vh) will take care of the document's height that is less than the height of the screen view.

回复收藏 0 原文

叶落知秋 2024-12-27 21:26:07

我一直在思考这个问题并尝试元素的高度：html、body 和 div。最后我想出了代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height question</title>
<style>
	html {height: 50%; border: solid red 3px; }
	body {height: 70vh; border: solid green 3px; padding: 12pt; }
	div {height: 90vh; border: solid blue 3px; padding: 24pt; }
	
</style>
</head>
<body>

	<div id="container">
		<p><html> is red</p>
		<p><body> is green</p>
		<p><div> is blue</p>
	</div>

</body>
</html>

在我的浏览器（Firefox 65@mint 64）中，所有三个元素都具有 1）不同的高度，2）每个元素都比前一个更长（html 为 50%，body 为 70vh，div 90vh）。我还检查了没有 html 和 body 标签高度的样式。也工作得很好。

关于 CSS 单位： w3schools：CSS 单位

关于视口的说明：“ Viewport = the浏览器窗口大小。如果视口宽度为 50 厘米，则 1vw = 0.5 厘米。”

I've been thinking over this and experimenting with height of the elements: html, body and div. Finally I came up with the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Height question</title>
<style>
	html {height: 50%; border: solid red 3px; }
	body {height: 70vh; border: solid green 3px; padding: 12pt; }
	div {height: 90vh; border: solid blue 3px; padding: 24pt; }
	
</style>
</head>
<body>

	<div id="container">
		<p><html> is red</p>
		<p><body> is green</p>
		<p><div> is blue</p>
	</div>

</body>
</html>

With my browser (Firefox 65@mint 64), all three elements are of 1) different height, 2) every one is longer, than the previous (html is 50%, body is 70vh, and div 90vh). I also checked the styles without the height with respect to the html and body tags. Worked fine, too.

About CSS units: w3schools: CSS units

A note about the viewport: " Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm."

回复收藏 0 原文

~没有更多了~