2

問題

私は下の画像に似たものを作ろうとしています。ここで、黒は本体でid="library"、グレーの div id="body"(内側の div のマージンがないため表示されません)、水色の div id="sideBar"、赤の div id="content"、青の div id="navBar"、および緑の divid="contentWindow"です。

画像：

http://i.imgur.com/wplyfqJ.png?1

赤の div (緑の親) 内に緑の div を含めるのに問題があります。基本的に、赤の div に関して緑のマージンのみを構成し、高さを明示的に設定する必要はありません。これは私の実装です:

http://jsfiddle.net/efntL/

すべての div を画面の幅と高さに合わせて調整し、すべてが常に (小さなブラウザー ウィンドウまで) 表示されるようにしたいと考えています。

次のリンクを見てきましたが、有用なものは何も提供されていません。

DIV 100% の高さ内のサイズ変更可能な DIV がうまく機能しない! 助けてください。

この div 構造内に div をプッシュする方法は?

親 div を子 div で展開

コードは上記のフィドルで見ることができますが、ここにも含めました。

body.library,
html {
  background: black;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
}

div#body {
  /*display:block;*/
  background: #E6E6E6;
  max-width: 400px;
  display: block;
  height: 90%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

div#sidebar {
  /*display:block;
    position:relative;*/
  background: #94DBFF;
  float: left;
  width: 50px;
  height: 100%;
}

div#content {
  /*display:block;
    position:relative;*/
  background: #FF0000;
  min-width: 70px;
  margin-right: 0px;
  margin-left: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100%;
}

div#contentWindow {
  display: block;
  position: relative;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 80px;
  margin-left: 80px;
  background-color: green;
  height: 100%;
  overflow: auto;
}

div#navBar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}
<body class="library">
  <div id=body>
    <div id="sidebar">
      <p>Hej</p>
      <p>Hej</p>
      <p>Hej</p>
      <p>Hej</p>
    </div>

    <div id="content">
      <div id="navBar">
        <p>Hey</p>
      </div>

      <div id="contentWindow">
        <p>Hej</p>
      </div>
    </div>
  </div>
</body>

4

3 に答える 3

1

navBar の高さが固定されている場合、これでうまくいく可能性があります。

body.library, html {
    background:black;
    height:100%;
    margin: 0; 
    padding: 0; 
    border: 0 none;
}

div#body {
     /*display:block;*/
    background:#E6E6E6;
    max-width:400px;
    display:block;
    height:90%;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:auto;
    margin-right:auto;  
}

div#sidebar{
    /*display:block;
    position:relative;*/
    background:#94DBFF;
    float:left;
    width:50px;
    height:100%;    
}

div#content{
    display:block;
    position:relative; //position relative to contain the absolutely positioned element
    background:#FF0000; 
    min-width:70px;
    margin-right:0px;
    margin-left:50px;
    margin-top:0px;
    margin-bottom:0px;
    height:100%;
}

div#contentWindow{
    display: block;
    position:absolute; //set the position to absolute
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:50px; //increase margin top to have the navBar visible
    margin-bottom:20px;
    margin-right:20px;
    margin-left:20px;
    background-color: green;
}

div#navBar {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    text-align:center;
}

フィドルをチェックしてください - http://jsfiddle.net/taneleero/8TQKW/

于 2013-10-06T20:52:54.987 に答える
1

HTML 部分:

<div id="wrapper">
    <div id="inside-left"></div>
    <div id="inside-right">
        <div id="top"></div>
        <div id="bottom"></div>
    </div>
</div>

CSS 部分:

#wrapper {    
    box-sizing: border-box;
    overflow: hidden;
    background-color: black;
    padding: 7%;
}
#inside-left {
    box-sizing: border-box;
    background-color: cyan;
    float: left;
    width: 30%;
    height: 400px;
}
#inside-right {
    overflow: hidden;
    box-sizing: border-box;
    background-color: red;
    width: 70%;
    float: right;
    padding: 10px;    
    height: 400px;
}
#inside-right #top {
    box-sizing: border-box;
    background-color: blue;
    height: 70%;
    width: 100%;
}
#inside-right #bottom {
    margin-top: 10px;
    box-sizing: border-box;
    background-color: green;
    height: 28%;
    width: 100%;
}

jsFiddleの私の例を見てください

于 2013-10-06T20:58:19.557 に答える
0

これは完全にサイズ変更可能なソリューションです。

html {
  height: 100%;
  width: 100%;
}
#library {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
#library #body {
  width: 90%;
  height: 90%;
  background-color: gray;
  margin: 3% 5%;
}
#library #body #sidebar {
  display: inline-block;
  width: 20%;
  height: 90%;
  background-color: #8eeeff;
  margin: 2%;
}
#library #body #content {
  display: inline-block;
  width: 70%;
  height: 90%;
  background-color: red;
  margin: 2%;
}
#library #body #content #navbar {
  width: 90%;
  height: 20%;
  background-color: blue;
  margin: 3% 5%;
}
#library #body #content #contentwindow {
  width: 90%;
  height: 70%;
  background-color: green;
  margin: 3% 5%;
}

マークアップ

<body id="library">


        <div id="body">

            <div id="sidebar"></div>

            <div id="content">

                <div id="navbar"></div>

                <div id="contentwindow"></div>

            </div>

        </div>


</body>
于 2013-10-06T21:06:36.940 に答える