Question

我想在HTML / CSS中实现这个目标：

+---------------------------------------------------------------------+
| HEADER DIV                                                          |
+------------+--------------------------------------------------------+
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|    nav DIV |   scrollable DIV                                       |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
|            |                                                        |
+---------------------------------------------------------------------+
| FOOTER DIV                                                          |
+---------------------------------------------------------------------+

页眉和页脚div是浏览器窗口宽度。
页眉和页脚以及固定高度（以像素为单位）
页眉和页脚并固定在浏览器的顶部和底部 window nav div是浏览器窗口的高度减去（标题高度+ 页脚高度）
可滚动内容在内部滚动，不会影响页脚或标题的绝对位置。

我只能达到导航DIV +和可滚动DIV一起滚动的程度。当可滚动的DIV滚动时，我无法使NAV div不滚动。

我想关键是如何将两个div并排放置，而在另一个滚动时不滚动其中一个。

Answer 1

<style> 
* { margin: 0; padding: 0; }
.container { position: fixed; height: 100%; width: 1000px; } 
.header { height: 10%; width: 100%; } 
.wrapper { width: 100%; height: 80%; } 
.wrapper .nav { width: 20%; display: inline-block; vertical-align: top; } 
.wrapper .scrollable { width: 80%; margin-left:-4px; display: inline-block; vertical-align: top; overflow-y: scroll; } 
.footer { height: 10px; width: 100%; } 
</style>

<body> 
  <div class="container">    
       <div class="header"></div>    
       <div class="wrapper">
          <div class="nav">
          </div>
          <div class="scrollable">
          </div>    
       </div>    
       <div class="footer"></div> 
      </div> 
</body>

Answer 2

nav
{
 margin-left:0px;
 width:100px;
}

scrollable
{
 margin-left:100px;
}

或者

    .container
    {
        width:800px;
    }
    .nav{
      width: 300px;
      float: left;
    }
    .scrollable        {
       width: 500px;
       float:right;
    }

HTML File
<div class="container">
  <div class="nav">left content</div>
  <div class="scrollable">right content</div>
</div>

试试这个我希望它可以帮到你！

如何并排设置两个div

2 个答案:

或者