gpt4 book ai didi

html - 向右扩展一个 div 到页面底部

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

我知道这个问题已经被问过很多次了,但是给出的解决方案都不适合我。粗暴的基本例子可见here和一个方便的视觉指南 here .

所以是左边的棕色 div 出了问题。它完全是空的,纯粹是装饰性的,除了背景什么都没有。 (粉红色的很好,他们完全按照我告诉他们的去做。)显然,对于棕色的 div,高度:100%;只延伸到浏览器窗口的底部。如果粉色 div 的内容使页面滚动,则棕色不会再向下滚动。

无效的解决方案

人造柱正如您从方便的视觉指南中看到的那样,我得到的内容 div 基本上使其成为横向滚动布局——目前最多 10 个 div 向右延伸大约 10,000 像素。由于人造栏基本上需要制作包含栏的背景图像,并且由于我的背景是图案,因此生成的 10,000 像素宽图像会严重影响加载时间。

指定棕色 div 的像素高度内容 div 不是标准高度。在某些页面上,最长的距离只有浏览器窗口底部下方的几百个像素,而在其他页面上则有几千个像素。将棕色 div 设置为数千像素高以覆盖它们既不整洁又懒惰,我真的不想诉诸于此。

双背景图片我在 CSS3 中发现的一点是,您可以为主体背景设置两个背景图像。我几乎受够了!有没有办法为单独的图像指定确切的细节? (例如,将 whitepaper.jpg 设置为重复,然后将 brownpaper.jpg 设置为仅重复 y)如果可以做到,那么我已经知道了,但据我所知,两个图像必须具有相同的属性,这意味着再次使柱状图像扩展数千像素,并使其成为 .png 以使其透明以看到后面的白色。

将 body 和 html 的高度设置为 100%什么也没做。它实际上破坏了表现良好的粉红色 div 中的某些内容。

代码(重要)

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
body
{
font-family: conquerorsans, Tahoma, verdana, sans-serif;
font-size: 18pt;
color: #9e8166;
letter-spacing:2px;
background-color: #e6e0d5;
background-image:url(images/layout/whitepaper.jpg);
background-repeat: repeat;
background-position:top left;
}

#top-trim
{
position:absolute;
left:90px;
top:0px;
height:20px;
width:550px;
background-image:url(images/layout/brownpaper.jpg);
}

#main-header
{
position:absolute;
left:90px;
top:90px;
height:100%;
bottom:0px;
margin-bottom:0px;
width:550px;
background-image:url(images/layout/brownpaper.jpg);
}
</style>
</head>
<body>

<header id="top-trim">
</header>

<header id="main-header">
</header>

<div style="position:absolute; top:400px; left:700px; width:20px;">
a dsg asd gf asdfg as dfg dfsag df g dfa g afd ga df ga fg a sg a g ag a ga fsa fas dg a sfdg asd g asd ga dsg adsg as dg as g ar ga rg a g asd ads f asd f dsf asd dsaf asd f sda fasd f ads fsd sd dsf asdf a sdgsda f asd a ds fa sdf ads fads f as d asdf sd a sdf asd f asdf asd f asd f ds fsda f f d ads fad sf asd asd sd f asd f a f ds asd fa fa ss ad
</div>

</body>
</html>

关于如何修复它的想法?上下滚动时div固定,左右滚动可不可以?

我得出的结论是 CSS 无法做到这一点。如果它可以用 javascript、jQuery 甚至 php 完成,那么我也愿意接受。虽然我对这三种语言是全新的,所以请保持温和!

最佳答案

首先你的例子不工作

其次,最简单的方法是给棕色position:absolute,按照 float 它的方式设置样式,补偿边距,并给它的父position:relative。你没有为我提供 CSS 以便能够完全按照你想要的方式重新创建它,但下面的演示应该是你实现修复所需的全部内容

Demo Here

关于html - 向右扩展一个 div 到页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19742893/

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