0

そこで、レスポンシブデザインに関する記事（ここ）を見つけて、チュートリアルの一部にあるようなものを作成しようとしました。このサイトでは、要素のサイズを、要素が含まれているコンテナのサイズで割ると言われています（1050ではなく1000で割った理由は、div＃mainの余白が1000pxになっているためです。ヘッダーは1050pxです）それが意味をなさない場合は、リンクで説明できます。フルサイズのブラウザでは問題ないように見えますが、ウィンドウを大きく縮小すると、本来のサイズに変更されません。コードのどの部分が間違っているのか正確にはわかりませんが、誰かが私を助けてくれるなら、それは素晴らしいことです！これが私が作ったページへのリンクです。そして、これが私のソースコードです：

<!DOCTYPE html>
<html>
<head>
<style>

body, html {
    margin: 0;
    height: 100%;
    width: 100%;
}    

header {
    height: 100px;
    max-width: 1050px;
    margin: 0 auto;
}

#main {
    border-radius: 25px;
    background-color: #aaa;
    height: inherit;
    max-width: inherit;
    margin: 25px;
}

.box {
    width: 47.5%;
    height: 75%;
    margin: 1.25%;
    background-color: #444;
    border-radius: 15px;
    float: left;
}

</style>
</head>
<body>

<header>
    <div id="main">
        <span class="box">
        </span>
        <span class="box">
        </span>
    </div>
</header>

</body>
</html>
4

1 に答える 1

1

何が起こっているのかを説明すると、実際には問題がないことがわかるかもしれません。

内側のボックスの高さは、親コンテナの高さの75％に基づいて固定されています。したがって、すべての要素の高さは同じままです。ただし、余白は親要素の幅の一部であるため、ページ幅に応じて変化します。ページが小さくなると、マージンが小さくなります。divは自然にページのできるだけ高い位置にあるため、親の境界に向かって移動します。

これはすべてあなたのデザインで期待されています。これを修正するには、固定の上下の余白を設定します。

.box {margin: 12px 1.25%;}
于 2013-02-19T04:27:24.843 に答える