Question

我想将内容（文字/图片缩略图）添加到HTML页面中间的区域。这个区域目前有“文本段落”重复贯穿始终。我希望它能让底部的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中删除height属性并重新定位其下面的元素;

Answer 2

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

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

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

Bootstrap也值得一试，它是一个CSS框架，有一个完整的在线文档和模板。

http://getbootstrap.com/

带有绝对DIV标记的网页会扩展中间内容

2 个答案: