CSS：调整窗口大小时不会出现垂直滚动条，位置：绝对答案

【问题标题】：CSS: vertical scrollbar won't appear when resizing the window, position: absoluteCSS：调整窗口大小时不会出现垂直滚动条，位置：绝对
【发布时间】：2015-01-24 03:55:46
【问题描述】：

http://lymieer.net/janit/

当我调整窗口大小时，只出现水平滚动条。其他不再适合窗口（垂直）的材料，只是在窗口顶部“消失”，就像背景图像一样。我怎样才能让它正常工作？我已经尝试了我所知道的一切，但总是以某种方式出现问题（如果我让滚动条工作，其他事情没有）。该页面应如下所示：

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>

【问题讨论】：

这是因为您将 .tausta bottom 属性设置为零，这会将您的图像固定到视口的底部。
附言。记得问清楚的问题，比如“为什么”或“是什么导致了这种行为”
我编辑了我的帖子，希望现在更清楚一点。

标签： html css position css-position absolute

【解决方案1】：

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

此外，您不应在每个元素上都使用 position:absolute。

【讨论】：

如果我没记错的话，当我用背景图像在 css 中设置它时，我无法获得页面底部的背景。背景和窗口边缘之间总是有一些空白。无论如何，将背景更改为图像是我最后一次尝试让整个事情正常工作，但它仍然很糟糕，但反过来。

【解决方案2】：

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

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

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

【讨论】：