Question

我希望根据附加的蓝图创建一个动态页面，但div在某处重叠，还需要一些改进。在调整大小时，需要响应式布局和div的文本不会相互重叠。

＆＃13;

html,
body {
  margin: 0;
  overflow: hidden;
}
.top-bar {
  position: absolute;
  width: 100%;
  height: 5%;
  bottom: 95%;
  border-style: dotted;
}
.right-panel-main {
  position: absolute;
  height: 90%;
  bottom: 5%;
  width: 20%;
  right: 0;
  background-color: red;
  border-style: dotted;
  position: absolute;
}
.left-panel-main {
  position: absolute;
  height: 90%;
  bottom: 5%;
  width: 80%;
  right: 20%;
  background-color: pink;
  border-style: dotted;
  position: absolute;
}
#section-panel-main {
  width: 100%;
  height: 8%;
  border-style: dotted;
}
#response-button-panel {
  width: 100%;
  height: 8%;
  border-style: dotted;
  bottom: 0;
  position: absolute;
}
.bottom-bar {
  width: 100%;
  height: 5%;
  top: 95%;
  border-style: dotted;
  position: absolute;
  bottom: 0;
}

＆＃13;

<div id="container">
  <div class="top-bar">j</div>
  <div class="left-panel-main">
    <div id="section-panel-main"></div>
    <div id="response-button-panel"></div>

  </div>
  <div class="right-panel-main">j</div>
  <div class="bottom-bar">j</div>
</div>
\

＆＃13;

    <html>
<head> 
<style>
html, body {
    margin: 0;
overflow:hidden;

}

.top-bar
{
position: absolute;
width:100%;
height:5%;
bottom:95%;
border-style: dotted;
}

.right-panel-main
{
position: absolute;
height:90%;
bottom:5%;
width:20%;
right: 0;
background-color: red;
border-style: dotted;
position:absolute;
}
.left-panel-main
{
position: absolute;
height:90%;
bottom:5%;
width:80%;
right:20%;
background-color: pink;
border-style: dotted;
position:absolute;
}

#section-panel-main
{
width:100%;
height:8%;
border-style: dotted;
}

#response-button-panel
{
width:100%;
height:8%;
border-style: dotted;
bottom : 0;
position: absolute;
}
.bottom-bar
{
width:100%;
height:5%;
top:95%;
border-style: dotted;
position: absolute;
bottom: 0;

}
</style>

</head>
<body>
<div id="container">
    <div class="top-bar">j</div>
    <div class="left-panel-main">
        <div id="section-panel-main"></div>
        <div id="response-button-panel"></div>

    </div>
    <div class="right-panel-main">j</div>
    <div class="bottom-bar">j</div>
</div>
</body>
</html>

Answer 1

尝试这种布局，完全响应，当然对于您必须使用媒体查询的小型设备

body{
  margin: 0;
}

*{
box-sizing: border-box;
}

#header {
  position: absolute;
  top: 0;right:0;left:0;
  height: 40px;
  background: red;
}

#content{
  position: absolute;
  top: 40px;
  left:0;right:0;
  bottom: 40px;
}

#container{
  position: relative;
  margin-right: 140px;/*width of sidebar*/
  height: 100%;
  background: green;
}

#section{
  height: 40px;
  background: coral;
}

#main {
  position: absolute;
  top: 30px;
  left:0;right:0;
  bottom: 30px;
  overflow: auto;
  background-color: green;
}

#buttom-panel {
  position: absolute;
  right:0;left:0;bottom: 0;
  height: 30px;
  background-color: lightblue;
}

#sidebar{
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;/*width of sidebar*/
  height: 100%;
  background-color: yellow;
}

#footer{
  position: absolute;
  left:0;right:0;bottom:0;
  height: 40px;
  background-color: blue;
  
}

<html>
  <head>
  
  </head>
  
  
  <body>
  <div id="header">header</div>
  <div id="content">
    <div id="container">
      <div id="section">section</div>
      <div id="main">scrollable</div>
      <div id="buttom-panel">buttom panel</div>
    </div>  
    <div id="sidebar">sidebar</div>
  </div>
  
  <div id="footer">footer</div>
  
  
  
  
  </body>  
</html>

自定义css div相互重叠

1 个答案: