带有绝对 DIV 标签的页面随着内容展开中间变大

Question

我想将内容（text/picture 缩略图）添加到 HTML 页面中间的区域。该区域目前有 "Paragraph of text" 次重复。我希望底部的 DIV 标签可以随着中间的 DIV 标签的大小扩展而向下移动。如果中间两边的两个DIV可以展开到同样的高度就好了。这是否可以在不手动更改所有顶部和左侧属性的情况下实现？

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

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

更新：我删除了我所有子 DIV 的所有身高和绝对定位。然后我去添加了盒子阴影。我不得不调整一些东西的大小，所以它看起来很相似。这就是我得到的。它还不够完美：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;
}

Answer 1

移除 div.Slice-13 的高度属性并重新定位其下方的元素；

Answer 2

您的问题存在于向元素添加固定高度的 css 规则中。删除所有固定高度，您的元素将展开并强制浏览器滚动而不是您的元素。完成此操作后，您可能需要用实际 CSS 框阴影替换图像或重复图像。另外一个更好的方式来设计你的页面是摆脱你的绝对定位可能几乎在网站的每个地方并使用 margin: auto 0px;使元素在页面中居中。

这是一个很好的盒子阴影生成器：

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

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

http://getbootstrap.com/

带有绝对 DIV 标签的页面随着内容展开中间变大

Page with absolute DIV tags expand middle bigger with content

html

css

absolute