1

左側に高さ 100% のナビゲーション バー、幅 100% のヘッダー、高さと幅 100% のコンテンツ セクションを含む 2 列のリキッド レイアウトを作成したいと考えています。同様に、すべての辺に 10 または 20 ピクセルのマージンが必要であり、ヘッダー、ナビゲーション、およびコンテンツ ボックスの間にもマージンが必要です。これが私のフィドルです：

https://jsfiddle.net/d2Lnq6sd/1/

header {
  position: relative;
  height: 75px;
  width: 100%;
  background-color: red;
  border: 1px solid black;
}

nav {
  position: relative;
  top: 20px;
  left: 0px;
  height: 100%;
  width: 200px;
  padding: 10px;
  background-color: blue;
  border: 1px solid black;
}

section {
  position: absolute;
  top: 110px;
  left: 240px;
  width: 100%;
  background-color: green;
  border: 1px solid black;
}

ご覧のとおり、ナビゲーション バーの高さが 100% ではなく、コンテンツ セクションが広すぎます。最終結果は次のようになります。

http://imageshack.com/a/img921/9425/UYp8Ah.png

この問題についてGoogleでヘルプを見つけようとしましたが、何を使用すべきか、相対位置または絶対位置、およびどの属性にどれを使用するかがまだわかりません。ポインタはありますか？

4

5 に答える 5

1

このコードを試して、デモを見てください:

CSS:

body {
  color: #fff;
  font-family: verdana;
}
header {
  background-color: red;
  border: 1px solid black;
  height: 75px;
  width: 100%;
}
nav {
  background-color: blue;
  border: 1px solid black;
  float: left;
  margin: 2% 0;
  min-height: 300px;
  padding: 10px;
  width: 20%;
  height: 100%;
}
section {
  background-color: green;
  border: 1px solid black;
  float: right;
  position: absolute;
  right: 10px;
  top: 100px;
  width: 75%;
}

フィドルのデモを見る

于 2016-06-29T07:04:35.447 に答える
1

準備完了です: http://codepen.io/8odoros/pen/vKxVYv?editors=1100

  • ナビゲーション バーの高さは100% です
  • コンテンツセクションが広すぎない

html, body {
    height:calc(100% - 60px);
}
body {
  font-family: verdana;
  color: #fff;
}

.container {
  position: relative;
  margin: 10px;
  padding: 10px;
  height:100%;
  box-sizing:border-box;
}

header {
  float:left;
  height: 75px;
  width: 100%;
  background-color: red;
  border: 1px solid black;
  box-sizing:border-box;
}
nav {
  float:left;
  margin-top:20px;
  height: 100%;
  width: 200px;
  padding: 10px;
  background-color: blue;
  border: 1px solid black;
  box-sizing:border-box;
}

section {
  float:right;
  margin-top:20px;
  height:100%;
  padding: 10px;
  width:calc(100% - 220px); 
  background-color: green;
  border: 1px solid black;
  box-sizing:border-box;
}
<div class="container">

    <header>
        This is the header
    </header>
  
    <nav>
        This is the nav
    </nav>

    <section>
        This is the main section
    </section>
</div>

于 2016-06-29T07:12:42.163 に答える
0

さて、私はいくつかのことを変更しました：

https://jsfiddle.net/d2Lnq6sd/9/

body,html {
  height:100%;
}

body {
  font-family: verdana;
  color: #fff;
}

.container {
    position: relative;
    margin: 10px;
    padding: 10px;
    width: 73%;
    float: left;
    height:auto;
}

header {
  position: relative;
  height: 75px;
  width: 100%;
  background-color: red;
  border: 1px solid black;
}

aside {
  float:left;
  width:20%;
  margin-top:15px;
  margin-left:5px;
  height: 100%;
  background-color: blue;
  border: 1px solid black;
}

section {
  width: 100%;
  background-color: green;
  border: 1px solid black;
}

ナビゲーションを別のタグに移動しました。これは単なる HTML 5 構文ですリンク

フロートを使用して位置を維持することで、目的の効果を作成できます。幅を 100% にするには、パディングとマージンを調整して 20% + 80% の比率にすることをお勧めします。

お役に立てれば ：）

于 2016-06-29T07:04:31.663 に答える
-1 
Do you need like this ,

Html:
<div class="container">

    <header>
        This is the header
    </header>

    <nav>
        This is the nav
    </nav>

    <section>
        This is the main section
    </section>

</div>
Css:
body {
  font-family: verdana;
  color: #fff;
}

.container {
  position: relative;
  margin: 10px;
  padding: 10px;
}

header {
  position: relative;
  height: 75px;
  width:675px;

  background-color: red;
  border: 1px solid black;
}

nav {
  position: relative;
  top: 20px;
  left: 0px;
  height: 300px;
  bottom:200px;
  width: 200px;
  padding: 10px;
  background-color: blue;
  border: 1px solid black;
}

section {
  position: absolute;
  top: 110px;
  left: 240px;
  width: 100%;
  background-color: green;
  border: 1px solid black;
}



you can see the link:https://jsfiddle.net/d2Lnq6sd/11/
于 2016-06-29T07:07:44.077 に答える