2

问题

我正在尝试制作类似于下图的内容，其中黑色是主体id="library"，灰色 div id="body"（由于内部 div 缺少边距而不可见），浅蓝色 div id="sideBar"，红色 div id="content"，蓝色 divid="navBar"和绿色 div id="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 回答