0

我正在努力做到这一点，所以当一个 div 的高度变小时，另一个会随之向上移动。

这是一个小提琴。

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

基本上，它是响应浏览器的。如果浏览器做得更小，#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;

    }​

填充问题

在此处输入图像描述

4

1 回答 1

1

假设您需要保留#topas position: absolute，则没有纯 CSS 方法可以做到这一点。由于#top是绝对的，它不再是文档流的一部分，#container也不再与之相关。你可以

A. 使用 javascript 观看window.resize事件或您所指的任何调整大小的事件，然后执行数学以更改top属性#container

或者

B. 更改#top并position: relative删除topCSS 属性#container

或者

#topC. 对' 高度和#container'top属性使用基于百分比的值。

于 2012-08-11T21:08:43.303 回答