gpt4 book ai didi

css - 尝试让带有 bg 的 div 容器垂直延伸而没有滚动条

转载 作者:行者123 更新时间:2023-11-28 14:49:37 25 4
gpt4 key购买 nike

我想要的是有一个居中的内容列,其中有一个带有长垂直渐变的 bg。它很可能会超出浏览器,但我不希望它创建滚动条。我希望它表现得就像它继续的主体背景,并且只有在浏览器更大或内容更多时才会显示。

最佳答案

看来您需要这样的东西。我的示例使用了表格,但您可以尝试将其替换为 div 布局。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>aruseni</title>
<style type="text/css">
body {
font-size: 14px;
font-family: arial, helvetica, sans-serif;
color: #000;
background-color: #9b9b9b;
}

html, body{
margin:0;
padding:0;
height:100%;
border:none
}

a, a:link {
font-weight: bold;
color: #000;
}

a:visited {
font-weight: bold;
color: #444;
}

img {
border: 0;
}

table.site {
border: 0;
padding: 0;
border-spacing: 0;
margin: 0 auto;
width: 80%;
height: 100%;
min-width: 700px;
}

tr {
vertical-align: top;
}

td {
padding: 0;
}

td.left_side {
width: 200px;
}

td.right_side {
width: 200px;
}

td.content {
padding: 10px;
background-color: #fff;
background-image:url('gradient-1x2000.png');
background-repeat: repeat-x;
width: 200px;
}
</style>
</head>
<body>

<table class="site">
<tr style="padding: 0px;">
<td class="left_side">&nbsp;</td>
<td class="content">
<p>Your contents go here. :)</p>
</td>
<td class="right_side">&nbsp;</td>
</tr>
</table>
</body>
</html>

这里的渐变是一张高度为2000,重量为1的图片。渐变从顶部开始,如果浏览器的高度超过 2000 像素(哦,真的吗?),如“background-color: #fff;”指定,呈现白色。

关于css - 尝试让带有 bg 的 div 容器垂直延伸而没有滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4776842/

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