gpt4 book ai didi

HTML CSS 高度 100% 扩展超出页面大小

转载 作者:太空宇宙 更新时间:2023-11-04 15:22:27 24 4
gpt4 key购买 nike

我正在处理的页面上的 CSS 有点像噩梦。我有两个 div 标签,一个标题和一个主要内容,标题设置为 250px 的高度,然后主要设置为 100% 的高度。我还将 html 和 body 的高度也设置为 100%,以满足页面中将容器设置为 100% 的问题。

问题是我现在有一个超过浏览器大小的页面并显示滚动条,我不想删除滚动条,因为该页面可能超过浏览器的大小。

HTML 代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page Height 100% Issue</title>

<link href='../style/test.css' rel='stylesheet' type='text/css' />

</head>

<body>

<div class='head'>Header</div>

<div class='content'>Main Content</div>

</body>
</html>

CSS:

html {    height:100%;0}body {    height:100%;}div.head {    width:100%;    height:250px;}div.content {    width:100%;    height:100%;}

谁能帮我把这一切都放在一个页面上,设置为页面的最大尺寸,没有滚动条,高度为 100%。

最佳答案

您在 div.content 上设置了 100% 的高度,它将占据其容器元素(body)的 100%。所以 body 的整体高度将是 100% + 250px(div.head 的高度),这不是你想要的。

添加一个包含的 div 并设置高度是最好的方法,我已经测试了这段代码,它似乎可以工作:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page Height 100% Issue</title>

<style type="text/css">
html {
height:100%;
}

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

div.head {
width:100%;
height:250px;
}

div.container{

height:100%;
}

div.content {
width:100%;
}
</style>

</head>

<body>
<div class="container">
<div class='head'>Header</div>

<div class='content'>Main Content</div>
</div>
</body>

</html>

关于HTML CSS 高度 100% 扩展超出页面大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7368834/

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