Question

我想创建一个布局为

的页面

|right panel|______toppanel________|left panel   |
|           |Cesium Container      |             |
|           |                      |             |
|           |                      |             |
|           |                      |             |
|           |______________________|             |
|           |Bottom Panel          |             |
|           |                      |             |
|           |                      |             |

但是有了这个CSS

<style>
   @import url(../Build/Cesium/Widgets/widgets.css);
   #cesiumContainer {
      position: absolute;
      top: 10%;
      left: 14.7%;
      height: 65%;
      width: 70%;
      margin: 0;
      overflow: hidden;
      padding: 0;
      font-family: sans-serif;
   }
   div
   {
       border: 3px solid; 
       border-color:3300FF;
   }
   body 
   {
      padding: 0;
      margin: 0;
      overflow: hidden;
      height:100%;          
   }
   #rightpanel
   {
      top:0;
      height: 100%;
      float:right;
      right: 0;
      width: 14.7%;
       margin: 0;
      overflow: hidden;
      padding: 0;
      font-family: sans-serif;
    }
    #leftpanel
    {
      top: 0%;
      height: 100%;
      left: 0;
      width: 14.5%;
      margin: 0;
      overflow: hidden;
      padding: 0;
      font-family: sans-serif;
     }
     #bottompanel
     {
        height: 10%;
      width: 50%;
      bottom:0%;
      left:20%;
       margin: 0;
      overflow: hidden;
      padding: 0;
      font-family: sans-serif;
      posistion: absolute;
   }
   #fullpage
   {
       position:absolute;
       top:0;
       bottom:0;
       left:0;
       right:0;
       overflow:hidden;
       z-index:-1
    }
    html
    {
      min-height:100%;
      position:relative;
    }
</style>
</head>
<body>
    <div id="fullpage">
        <div id="rightpanel">
            <p> hii Right panel</p>
        </div>
        <div id ="leftpanel">
            <p> hii Left panel</p>
        </div>
        <div id="cesiumContainer"></div>
        <div id= "bottompanel">
            <p> hii Bottom panel</p>
        </div>
   </div>
</body>

底部div不会位于两个侧面板之间，而是被推到两个面板的底部，因此它们被推离页面，因为它们是100％。

JSFiddle

Answer 1

您的#bottompanel有拼写错误。它说posistion: absolute;代替position: absolute;

这应该可以解决问题。

Answer 2

@JuanC是正确的。

posistion: absolute;中的错字#bottompanel是罪魁祸首。

查看此jsfiddle演示。

Answer 3

可以有更好的方法来找到所需的布局。把它放在那里。

JSBin Example!

HTML（有点乱，因为我们不想要空格，display: inline-block;的副作用）

<div id="wrap">
<div id="leftSide"></div><div id="middle"><div id="header"></div><div id="content"></div><div id="footer"></div></div><div id="rightSide"></div>
</div>

CSS

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap div {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
}
#leftSide, #rightSide {
    width: 20%;
    height: 100%;
    background: #F00;
}
#middle {
    width: 60%;
    background: #000;
    height: 100%;
}
#header {
    height: 30%;
    background: #FF0;
    width: 100%;
}
#content {
    height: 40%;
    background: #F30;
    width: 100%;
}
#footer {
    height: 30%;
    background: #FF0;
    width: 100%;
}

4面板div无法正确格式化

3 个答案: