CSS左右分栏，左栏高度要为100%怎么做

Posted 2023-05-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS左右分栏，左栏高度要为100%怎么做相关的知识，希望对你有一定的参考价值。

我为网页写CSS，实话说我主编程，美工不归我管的，但是没有办法呀。
我网页，左边是菜单栏，右边是内容栏。
菜单栏固定宽度的而且高度要为100%，就是顶到页脚。因为菜单栏有背景，要是高度自适应会很难看。但是大家都知道height:100%是没有效果的。
所以有什么好的方法介绍下呀。我试过一些了但是还是没有效果。急求。

是你没有设置好，任何标签的100%是相对于父亲节点而言的，如果你连父亲节点都不确定是多高的话，那你当前节点设置成100%是没有意义的。
因此，你看一下你的代码，把它所有的长辈节点设置为height:100%;
众所周知，所有网页的根节点是html，然后是body,因此这两个节点是一定要设置为100%的。
另外如果你用的是asp.net，很可能还会有一个form节点，这个节点也是要设置为100%的
因此，body,html,formheight:100%;，如果你的排版节点直接放在body下面，这样写就可以实现你要的效果了参考技术A height:100%,不是没有效果只是根据你具体的高来定的，那你只能量下你的高的具体值了，然后直接把高定义一个固定值参考技术B div+css。。将Div的高。设置为你浏览器的高度。css将height赋值为div的高参考技术C 用JS配合CSS可以完美解决。参考技术D 用框架 frame做左右结构的就可以了

css 实现页面区域分栏左右拉伸调整布局

想要实现如下图效果，红色可拉动的线往左边拉右边内容区域变大左边内容区域变小，往右边拉右边内容区域变小左边内容区域变大。

我们先来了解一下 css 的resize属性直达w3s，resize: none|both|horizontal|vertical;可以调整元素是否可左右拖动。

把 W3s 中的 resize 改为resize:horizontal;点击运行一下，就只可左右拉动。

接下来我们把 w3s 里代码改为如下内容，然后点击运行

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container 
        display: flex;
      

      .left 
        position: relative;
      
      .left .resize 
        width: 300px;
        resize: horizontal;
        overflow: auto;
        height: 200px;
      

      .content 
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        left: 0;
        overflow-x: hidden;
      

      .right 
        width: 200px;
        flex: 1;
        background: #eee;
        height: 200px;
      
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        <div class="resize"></div>
        <div class="content">
          吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖
        </div>
      </div>

      <div class="right">a啊啊啊</div>
    </div>
  </body>
</html>

诶~好像实现了我们想要的那种效果，但是只能点击右下角拖动，这不是理想效果，所以我们再来改动一下：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container 
        display: flex;
      

      .left 
        position: relative;
        height: 200px;
      
      .left .resize 
        width: 300px;
        resize: horizontal;
        overflow: scroll;
        height: inherit;
        opacity: 0;
      
      .resize::-webkit-scrollbar 
        width: 200px;
        height: inherit;
      

      .left .bar-btn 
        height: 200px;
        width: 2px;
        background: #666;
        position: absolute;
        right: 0;
        top: 0;
      

      .content 
        position: absolute;
        top: 0;
        right: 5px;
        bottom: 0;
        left: 0;
        overflow-x: hidden;
      

      .right 
        width: 200px;
        flex: 1;
        background: #eee;
        height: 200px;
      
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        <div class="resize"></div>
        <div class="bar-btn"></div>
        <div class="content">
          吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖吖
        </div>
      </div>

      <div class="right">a啊啊啊</div>
    </div>
  </body>
</html>

上述主要功能是给拖动区域增加了一条竖线，增大了视觉和可拖动区域。使用::-webkit-scrollbar width: 200px; height: inherit; 让resize右下角拖动按钮高度增大，并 opacity“隐藏”了resize拖动按钮。

但是我们仔细观看发现，当鼠标移动到可拖动分割线上时，鼠标并不能灵敏展示“可拖动”形态，需要往左一点点。这也不是理想效果，所以再来改动：

.left .bar-btn 
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #eee;
  border-left: 1px solid #bbb;
  pointer-events: none;

这时候鼠标一靠近拖动条就会改变形态:

接下来给拖动条加一点 css 样式 hover 效果，参考张大神的 css 加上下属代码：

.resize:hover ~ .bar-btn,
.resize:active ~ .bar-btn 
  border-left: 2px dashed skyblue;

当鼠标hover在隐藏的可resize区域时改变可拖动条的样式。点击运行，效果如下：

看样子好像已经达到我们想要的效果，可左右拖动并且鼠标悬浮有样式变化。我们尝试拖动到最左边或者最右边看一下效果：

可以看到拖到最左边没问题，但是拖到左右边的时候松开鼠标发现右内容区域不见了，而且也找不到可拖动竖条。

我们修改如下两个样式，再来看效果：

  .left .resize 
    max-width: 490px;
  

  .content 
    position: absolute;
    top: 0;
    /* right: 4px; */
    /* bottom: 0; */
    /* left: 0; */
    z-index: 0;
    overflow-x: hidden;

往最左和最右拉动都不会突破临界。

如果我们不想要拖动内容宽度压缩的效果，需要保持内容宽度不变的话可以修改：

.content 
  position: absolute;
  top: 0;
  /* right: 4px; */
  /* bottom: 0; */
  /* left: 0; */
  z-index: 0;
  overflow-x: hidden;
  width: 400px;
  z-index: 0;


.right 
  width: 200px;
    flex: 1;
    background: #eee;
    height: 200px;
    position: relative;
    z-index: 999;
    overflow: hidden;

<div class="right">
  <div style="width: 2;width: 200px;position: absolute;top: 0;left: 0;right: 0;">
      a啊啊啊
  </div>
</div>

张大神的例子 demo 地址

以上是关于CSS左右分栏，左栏高度要为100%怎么做的主要内容，如果未能解决你的问题，请参考以下文章

CSS+DIV怎么实现网页左右两栏高度一致？

DIV+CSS 如何让左右两个DIV的高度一致？

html使用百分比布局怎么保证左右高度相同？

css怎么设置高度固定宽度自适应

DIV+CSS布局问题 100%的页面上边固定高度下面div：height100%填充为左右结构左边固定宽度右边width:100%

css+div布局，左右两个div怎么能自动适应高度