文章/答案/技术大牛

发布

社区首页 >问答首页 >带有绝对DIV标签的页面随着内容的增加而扩展到中间。

问带有绝对DIV标签的页面随着内容的增加而扩展到中间。
EN

Stack Overflow用户

提问于 2015-07-09 23:43:20

回答 2查看 78关注 0票数 0

我想将内容(文本/图片缩略图)添加到HTML页面中间的一个区域。这一领域目前一直重复“案文段落”。我希望这样，这样，在底部的DIV标签可以向下移动，因为一个中间的DIV的大小扩大。如果中间两边的两个DIVs可以扩展到相同的高度，那也是很好的。如果不手动更改所有顶部和左边的属性，这是可能的吗？

目前，我在页面中放置了一个滚动条，以便您可以查看所有文本。当我添加内容时，我希望删除该滚动条，并在必要时展开页面高度。我知道绝对的定位是搞砸了我，但我调整了这个网页从我的网站上的其他网页，是一个固定的大小。我肯定这被认为是糟糕的页面设计..。

下面是我的网站上的示例页面：http://envyblade.xoom.it/swtor/sample.html

更新:我移除了我所有的高度和我所有的子DIVs的绝对位置。然后我去加了一个盒子阴影。我不得不调整一些东西的尺寸，这样看起来就会很相似了。这就是我得到的。它还没有那么完美：http://envyblade.xoom.it/swtor/sample2.html

这两幅图像将不会像我使用图像时那样，在顶部和底部阴影框之间居中。如果能看到底部框的阴影，而不是页面的结尾，那就太好了。

HTML：

<html>
<head>
<title>Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="Mainbox">

    <div class="Slice-07">
        <img src="images/Slice-07.jpg" width="1024" height="25" alt="">
    </div>
    <div class="Slice-08">
    </div>
    <div class="Slice-11">
        <h1>Sample Page</h1>    
    </div>
    <div class="Slice-13">
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    <p>
        Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text.
    Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. Paragraph of text. </p>
    </div>
    <div class="Slice-12">
    </div>
    <div class="Slice-23">
        <img src="images/Slice-23.jpg" width="1024" height="32" alt="">
    </div>
    <div class="SliceB2">
        <img src="images/logo1.jpg" width="66" height="66" alt="">
    </div>
    <div class="SliceB3">Let's do this!
    </div>
    <div class="SliceB4">
        <img src="images/logo2.jpg" width="66" height="66" alt="">
    </div>
    <div class="SliceB5">
        <img src="images/SliceB5.jpg" width="1024" height="25" alt="">
    </div>
    <div class="SliceB6">
        <img src="images/SliceB6.jpg" width="25" height="140" alt="">
    </div>
    <div class="SliceB7">Friendly Links<p>
        <a href="link1.html">Link 1</a> &#8226; <a href="link2.html">Link 2</a> &#8226; 
        <a href="link3.html">Link 3</a><br />
        <a href="link4.html">Link 4</a> &#8226; 
        <a href="link5.html">Link 5</a> &#8226; 
        <a href="link6.html">Link 6</a></p>
    </div>
    <div class="SliceB8">Enemy Links<p>
        <a href="link1.html">Link 1</a> &#8226; <a href="link2.html">Link 2</a> &#8226; 
        <a href="link3.html">Link 3</a><br />
        <a href="link4.html">Link 4</a> &#8226; 
        <a href="link5.html">Link 5</a> &#8226; 
        <a href="link6.html">Link 6</a></p>
    </div>
    <div class="SliceB9">
        <img src="images/SliceB9.jpg" width="25" height="140" alt="">
    </div>
    <div class="SliceB10"><span class="bottomlinks">Website Title: <a href="index.html">Home</a> &#8226; 
        <a href="history.html">History</a> &#8226; <a href="media.html">Video & Photo Memories</a></span>
    </div>
    <div class="SliceB11">
        <img src="images/SliceB11.jpg" width="1024" height="25" alt="">
    </div>
</div>

</body>
</html>

我的CSS页面：

body {
    background-color:#000000;
}

div.Mainbox {
    position:absolute;
    left: 50%;
    margin-left: -512px;
    top:0px;
    width:1024px;
    height:1024px;
}

div.Slice-07 {
    position:absolute;
    left:0px;
    top:0px;
    width:1024px;
    height:25px;
}

div.Slice-08 {
    position:absolute;
    left:0px;
    top:25px;
    width:34px;
    height:711px;
    background-image:url('images/Slice-08r.jpg');
    background-repeat:repeat-y;
}

div.Slice-11 {
    position:absolute;
    left:34px;
    top:25px;
    width:958px;
    height:100px;
    background-color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
    color:Orange;
    text-shadow: 3px 3px 2px #000000;
    font-family:Comic Sans MS;
}

div.Slice-12 {
    position:absolute;
    left:992px;
    top:25px;
    width:32px;
    height:711px;
    background-image:url('images/Slice-12r.jpg');
    background-repeat:repeat-y;
}

div.Slice-13 {
    position:absolute;
    left:34px;
    top:125px;
    width:958px;
    height:611px;
    background-color:#FFFFFF;
    overflow-y:scroll;
}

div.Slice-14 {
    position:absolute;
    left:330px;
    top:691px;
    width:23px;
    height:45px;
    background-color:#FFFFFF;
}

div.Slice-15 {
    position:absolute;
    left:353px;
    top:691px;
    width:45px;
    height:45px;
}

div.Slice-16 {
    position:absolute;
    left:398px;
    top:691px;
    width:169px;
    height:45px;
    background-color:#FFFFFF;
    line-height: 45px;
    text-indent: 2px;
}

div.Slice-17 {
    position:absolute;
    left:567px;
    top:691px;
    width:45px;
    height:45px;
}

div.Slice-18 {
    position:absolute;
    left:612px;
    top:691px;
    width:168px;
    height:45px;
    background-color:#FFFFFF;
    line-height: 45px;
    text-indent: 2px;
}

div.Slice-19 {
    position:absolute;
    left:780px;
    top:691px;
    width:45px;
    height:45px;
}

div.Slice-20 {
    position:absolute;
    left:825px;
    top:691px;
    width:167px;
    height:45px;
    background-color:#FFFFFF;
    line-height: 45px;
    text-indent: 2px;
}

div.Slice-21 {
    position:absolute;
    left:34px;
    top:715px;
    width:22px;
    height:21px;
    background-color:#FFFFFF;
}

div.Slice-22 {
    position:absolute;
    left:56px;
    top:715px;
    width:274px;
    height:21px;
    background-color:#FFFFFF;
    line-height: 21px;
    text-indent: 2px;
}

div.Slice-23 {
    position:absolute;
    left:0px;
    top:736px;
    width:1024px;
    height:32px;
}

div.SliceB2 {
    position:absolute;
    left:0px;
    top:768px;
    width:66px;
    height:66px;
}

div.SliceB3 {
    position:absolute;
    left:66px;
    top:768px;
    width:892px;
    height:66px;
    text-align: center;
    vertical-align: middle;
    line-height: 66px;
    color:white;
    font-size:26px;
    font-family:Comic Sans MS;
}

div.SliceB4 {
    position:absolute;
    left:958px;
    top:768px;
    width:66px;
    height:66px;
}

div.SliceB5 {
    position:absolute;
    left:0px;
    top:834px;
    width:1024px;
    height:25px;
}

div.SliceB6 {
    position:absolute;
    left:0px;
    top:859px;
    width:25px;
    height:140px;
}

div.SliceB7 {
    position:absolute;
    left:25px;
    top:859px;
    width:487px;
    height:100px;
    background-color:#FFFFFF;
    text-align:center;
}

div.SliceB8 {
    position:absolute;
    left:512px;
    top:859px;
    width:487px;
    height:100px;
    background-color:#FFFFFF;
    text-align:center;
}

div.SliceB9 {
    position:absolute;
    left:999px;
    top:859px;
    width:25px;
    height:140px;
}

div.SliceB10 {
    position:absolute;
    left:25px;
    top:959px;
    width:974px;
    height:40px;
    background-color:#FFFFFF;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

div.SliceB11 {
    position:absolute;
    left:0px;
    top:999px;
    width:1024px;
    height:25px;
}

.bottomlinks {
        border-style: dashed;
        border-width: 1px;
        padding: 3px 5px;
}

absolute

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-10 00:06:17

您的问题存在于css规则中，即将固定高度添加到元素中。删除所有固定高度，您的元素将展开，并迫使浏览器滚动，而不是您的元素。一旦完成了这一点，您可能需要用实际的CSS框阴影替换图像，或者将图像重复。此外，一个更好的方式，你的网页样式是摆脱你的绝对定位

这里有一个很好的盒子阴影发生器：

http://www.cssmatic.com/box-shadow

另外，Bootstrap可能是值得一看的，它是一个CSS框架，它有一个完整的在线文档和模板。

http://getbootstrap.com/

票数 0

Stack Overflow用户

发布于 2015-07-10 00:00:17

从div.slice13中移除“高度”属性，并将其下方的元素重新定位；

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31330176

复制

相似问题

问带有绝对DIV标签的页面随着内容的增加而扩展到中间。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有绝对DIV标签的页面随着内容的增加而扩展到中间。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有绝对DIV标签的页面随着内容的增加而扩展到中间。
EN