両翼レイアウトの変形と使用方法を詳しく解説-htmlチュートリアル-php.cn

両翼レイアウトの変形と使用方法を詳しく解説

零下一度

リリース： 2017-06-24 13:24:44

オリジナル

1648 人が閲覧しました

ボックスサイジング+ネガティブマージンアップグレードダブルフライングウィングレイアウト

1.ボックスサイジング属性

context-size、border-sizeの2種類の幅、高さ、パディング、ボーダー、マージン値はすべて一貫しています。

box-sizing: content-boxを使用した場合、divの幅と高さはwidthとheightの値になります
box-sizing: border-boxを使用した場合、divの幅と高さはdiv は、パディング + ボーダー + 幅 (コンテンツの高さ)、
、Border-BOX 属性の適用です
ダブルフライウィングレイアウトの変換、従来のダブルフライングハイトが適応されます。今回は、ダブルウィングレイアウトの高さが box-sizing 属性の border-box 値によって固定されるため、ヘッドとフッターが固定され、中央のコンテンツ部分にスクロールバーが自動的に表示されます。

コードは次のとおりです:

.content-size, .border-size{width: 200px;height: 100px;padding: 10px;border: 5px solid red;margin: 20px;
}.content-size{box-sizing: content-box;
}.border-size{box-sizing: border-box;
}

ログイン後にコピー

レンダリング:

キーコード分析

伝統的な両翼レイアウトを実現するため、ここでは詳細には触れません。

box-sizing 属性の導入によると、border-box に設定されている場合、その高さ = パディング + ボーダー値、およびマージンの負の値を使用する必要があることがわかります。
パディングはコンテンツ自体の高さを減らします

マージンの負の値はヘッド、フッター、コンテンツ間の距離を短くします

<html><head><meta charset="UTF-8"><title>Document</title><style>div, body{margin: 0px;}  .head{  height: 60px;  background: red;  }  .main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;  }  .main-main{  clear: both;  }  .main-main:after{  content: '';  display: block;  overflow: hidden;  clear: both;  }  .cont-main{  margin: 0px 300px 0px 200px;  overflow: hidden;  overflow-y: auto;  height: inherit;  }  .main .cont, .main .left, .main .right{  float: left;  height: 100%;  }  .main .cont{  width: 100%;  }  .main .left{width: 200px;margin-left: -100%;  }  .main .right{width: 300px;margin-left: -300px;  }  .footer{  height: 100px;  background: gray;  }</style></head><body><div class="head">head</div><div class="main"><div class="main-main"><div class="cont"><div class="cont-main">cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont最后一条<br/></div></div><div class="left">left</div><div class="right">right</div></div></div><div class="footer">footer</div></body></html>

ログイン後にコピー

コンテンツをスクロールしますこの記事は、main (.main などの中央部分の最も外側の div) の高さが画面いっぱいになるように height:100% に設定する必要があります。したがって、コンテンツレイアウトの外側の層に div (.main-main など) を追加する必要があります。現時点では、.main-main の高さが必要です。以下は CSS コードの中央の本文部分です:

.main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;
  }

ログイン後にコピー

以上が両翼レイアウトの変形と使用方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。