0

私はそれを作ろうとしているので、一方のdivの高さが小さくなると、もう一方のdivも一緒に上に移動します。

これがフィドルです。

したがって、#top（絶対位置を持つ）高さを600pxではなく400pxにする場合、その下の相対位置の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

#topとして保持する必要があると仮定するとposition: absolute、これを行うCSSのみの方法はありません。は絶対値であるため#top、ドキュメントフローの一部ではなく#containerなり、関連付けられなくなります。あなたはどちらかをすることができます

A. javascriptを使用して、window.resizeイベントまたは参照しているサイズ変更イベントを監視し、数学を実行して次のtopプロパティを変更します。#container

また

B.CSSプロパティをに変更#topしposition: relativeて削除しますtop#container

また

#topC.の高さと#containerのtopプロパティにパーセンテージベースの値を使用します。

于 2012-08-11T21:08:43.303 に答える