Question

问题

我正在尝试制作类似于下图的内容，其中黑色是id="library"的身体，灰色div id="body"（由于缺少内部div的边距而不可见），光blue div id="sideBar"，red div id="content"，blue div id="navBar"和green div id="contentWindow"。

图片：

我在红色div（绿色父母）中包含绿色div时遇到问题。基本上我想配置相对于红色div的绿色边距而不必明确设置高度。这是我的实施：

http://jsfiddle.net/efntL/

我希望所有div都适应屏幕宽度和高度，以便一切都可见（直到小浏览器窗口）。

我查看了以下链接，但它们没有提供任何有用的信息：

Resizable DIV inside DIV 100% height with margin around not working well! Some help please?

How to push a div inside this div structure?

Parent div expand with children 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>

Answer 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/

Answer 2

Html Part：

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

Css Part：

#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

上的示例

Answer 3

这是一个完全可调整大小的解决方案。

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>

在DIV高度问题内的DIV

3 个答案: