Question

在页面的末尾，应该有一个30px高的页脚。上面是内容区域，其中2列应填充可用高度（窗口大小），如果需要，左列应可滚动。目前，滚动整页而不是此单列。

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

＆＃13;

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;
 
}

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 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>

滚动单个css列而不是整页

2 个答案: