滚动单个 CSS 列而不是整页答案

【问题标题】：scrolling single css column instead of full page滚动单个 CSS 列而不是整页
【发布时间】：2015-01-29 00:42:22
【问题描述】：

在页面的最后，应该有一个高度为 30 像素的页脚。上面，有 2 列的内容区域应该填充可用高度（窗口大小），如果需要，左列应该是可滚动的。目前，滚动的是整页而不是这一列。

如何解决这个问题？谢谢！

footer {
    background-color: #000000;
    height: 30px;
    width: 100%;
    position: absolute;
    bottom: 0px;
}


.col1 {
  float:left;
  padding-left: 20px;
  overflow:auto;
}

.col2 {
  float:left;
  padding-left: 20px;
 
}

<html>
<body>
<header>
    <h1>Headline</h1>
</header>
    <div class="ym-wrapper">
        <div class="grid">
            <div class="col1">
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
 
            </div>
            <div class="col2">
               text
            </div>

        </div>
        <footer></footer>
     </div>
 
</body>  
  
  
</html>

【问题讨论】：

标签： css scroll multiple-columns

【解决方案1】：

try this css:

html{overflow:hidden}
footer {
    background-color: #000000;
    height: 30px;
    width: 100%;
    position: absolute;
    bottom: 0px;
}


.col1 {
  float:left;

  width:250px; 
  padding:3px; 
    position:relative
}

.content
{
height: 18000px;
   overflow:auto;
    width:250px; 
    background:#fff;
    position:absolute;
    bottom:50;
}

.col2 {
  float:left;
  padding-left: 20px;

}

还有 HTML：

<html>
<body>
<header>
    <h1>Headline</h1>
</header>
    <div class="ym-wrapper">
        <div class="grid">
            <div class="col1">
             <div class="content">
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
               <p>text</p>
            </div>
            </div>
            <div class="col2">
               text
            </div>

        </div>
        <footer></footer>
     </div>

</body>  


</html>

【讨论】：

谢谢 - 但在这种情况下，当窗口尺寸缩小时，col1 列不会出现滚动条
谢谢 - 如何更改 col1 使用可用的全高，从顶部到页脚？

【解决方案2】：

我想出了以下解决方案，它利用通过vh 设置的高度。

.col1 {
  float: left;
  width: 300px;
  padding: 10px;
  position: relative;
}
.col2 {
  float: left;
  width: 400px;
  padding: 10px;
  position: relative;
}
.ym-wrapper {
  width: 1000px;
  margin: 0 auto;
}
.content {
  top: 40px;
  width: 100%;
  position: absolute;
  overflow-y: auto;
  height: 90vh;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style_test.css" type="text/css" />
</head>

<body>
  <div class="ym-wrapper">
    <div class="col1">
      <h3>Column</h3>
      <div class="content">
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>

      </div>
    </div>
    <div class="col2">
      <h3>Column</h3>
      <div class="content">
        <p>text2</p>
        <p>text2</p>
        <p>text2</p>
        <p>text2</p>
      </div>
    </div>

  </div>
</body>


</html>

【讨论】：