Question

我试图这样做，当一个div的高度变小时，另一个div随之移动。

因此，如果我要使#top（具有绝对定位）的高度为400px而不是600px，我如何确保相对定位的div从顶部向上移动到420px，从它开始原始位置为620px？

基本上，它是响应浏览器。如果浏览器变小，#top将缩放，因此下面的div需要随之移动。

更新

HTML：

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <link href="Stylesheet.css" rel ="stylesheet" type="text/css">


        <title>Hello World</title>
    </head>
    <body>
        <div id="top"></div>
        <div id ="logo"></div>
<div class="container">A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work."[4] "Wiki" (pronounced [ˈwiti] or [ˈviti]) is a Hawaiian word meaning "fast" or "quick".[5]A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work</div>
    </body>
</html>

CSS：

body{
    background-color: red;
    width: 100%;
}

div#top{
    position: relative;
    display: block;
    width:100%;
    height: 600px;
    top:0;
    left:0;
    background-color: black;
    border-bottom: 3px solid white;
    margin-bottom: 20px;

}


div#logo{
    position:absolute;
    color: green;
    left: 50%;
    margin-top: 20px;
    margin-bottom: 30px;
}


.container{
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    width: 920px;

    }

填充问题

enter image description here

Answer 1

假设您需要将#top保留为position: absolute，那么就没有这种方法可以做到这一点。由于#top是绝对的，因此它不再是文档流的一部分，#container不再与之相关。你可以

一个。使用javascript观看window.resize事件或您引用的任何调整大小事件，然后执行数学运算以更改top的{{1}}属性

或

B中。将#container更改为#top并从position: relative

中删除top CSS属性

或

℃。使用基于百分比的#container高度和#top #container属性值。

Div正在和谐地移动和调整大小

1 个答案: