Question

http://lymieer.net/janit/

当我调整窗口大小时，只显示水平滚动条。其他材料不再适合窗户（垂直），只是＆＃34;消失＆＃34;在窗口的顶部，像一个背景图像。我怎样才能让它正常工作？我已经尝试了所有我知道的东西，并且总是出现问题（如果我得到滚动条的东西工作，其他东西没有）。该页面应如下所示：

http://i42.photobucket.com/albums/e334/kermakavio/jani.jpg

CSS：

body {
    background-color: black;
    overflow: scroll;
    }

header {
    left: 400px;
    bottom: 640px;
    position: absolute;
    }

section {
    overflow: auto;
    bottom: 80px;
    left: 280px;
    width: 600px;
    height: 400px;
    position: absolute;
    }

footer {
    width: 600px; 
    height: 10px;
    bottom: 10px;
    left: 280px;
    position: absolute;
    }

.tausta {
    position: absolute;
    bottom: 0px;
    }

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Jani Talonen</title>
        <link rel="stylesheet" href="jani.css" />
    </head>
    <body>
        <!-- sivun sisältö -->
        <img src="Tausta.jpg" class="tausta" />
        <header><img src="otsikko.png" /></header>

        <section>Lavasterakentajan työtehtävät

Lavasterakentaja on käytännön tekijä. Hän toimii lavastajan tai muun suunnittelijan antamien ohjeiden mukaan ja rakentaa lavasteita teatteriin, televisioon tai elokuviin. Lavasterakentaja osaa rakentaa erilaisia näyttelyosastoja esimerkiksi messuille, konferensseihin ja museoihin.
<br /><br />
Lavasterakentajalla on visuaalista silmää ja taitoa hahmottaa tilaa. Toimivien ratkaisujen löytäminen edellyttää luovuutta, ideointikykyä ja kekseliäisyyttä. Lavasterakantaja valmistaa lavasteita lähes mitä tahansa materiaalista – puusta, metallista, muovista. Hän työstää materiaaleja maalaten, rakentaen, tapetoiden ja osaa purkaa, pystyttää ja korjata lavasteita. 
<br /><br />
Lavasterakentaja voi työskennellä somistajana, teattereiden lavastepajoissa tai elokuvia ja tv-tuotantoja tekevissä tuotantoyhtiöissä. Lavastustyö ostetaan useasti ulkopuolisena freelancer-työnä.
Lisätietoa lavasterakentajan koulutuksesta
<br /><br />
Lisää tietoa Pohjois-Karjalan ammattiopisto Outokummun lavasterakentajan koulutuksesta saat täyttämällä sivun alareunassa olevan yhteydenottopyynnön, jolloin Pohjois-Karjalan ammattiopisto Outokumpu vastaa kysymyksiisi.
        </section>
        <footer>(c) Anni Pihlaja 2015</footer>
    </body>
</html>

Answer 1

这是因为你的图像tausta.jpg具有底部的绝对属性：0px; 您应该使用background-image属性在Css中设置图像。

此外，你不应该在每个元素上使用position：absolute。

Answer 2

您在页面上没有足够的元素<body>有足够的高度。一切都绝对定位。当元素以这种方式定位并且具有设置的宽度和高度时，它将具有内部滚动，内容将溢出或被隐藏。如果您调整浏览器窗口的大小，事情会因为它们的定位而消失。

使用CSS background-image属性将图像设置为背景。

更重要的是，停止在每个元素上使用position: absolute。在代码的结构方式以及页面如何在不同的浏览器高度和宽度上重新流动时，您尝试做的事情并不是一个好主意。

CSS：调整窗口大小时不会出现垂直滚动条，position：absolute

2 个答案: