Question

我想在我的div中添加滚动条，带有固定的页眉和页脚。

我的代码是，

<div id="header" class="form-group form-group-sm"></div>
<div class="main">
    <div class="col-xs-6">
    </div>
    <div class="col-xs-6">
    </div>
</div>
<div id="footer" class="container"></div>

CSS是，

.col-xs-6{    
        float:left;
        width :50%;
}
.main{
    float:left;
    width :100%;
    background-color: skyblue;
    overflow: auto;
}
#header,#footer{
     float:left; 
     width :100%;
}

我使用了溢出标签，但是它无法正常工作。

Answer 1

当您添加的内容超过.main div height时，它将可滚动

<强>样本：

.ax{
    height:75px;
    float:left;
    width :400px;
}
.main{
    max-height:100px;
    float:left;
    width :100%;
    background-color: skyblue;
    overflow-y: scroll;
}
#header,#footer{
     float:left; 
     width :100%;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id=header class=form-group form-group-sm>
    </div>
     <div class="main">
     wkjkjnkrnf
    	<div class="ax">
    	</div>
    	<div class="ax">
    	</div>
      </div>
    <div id=footer class=container>
    </div>

Answer 2

使用一些max-height或height然后使用overflow：滚动工作。在使用col-sm类型类之前，还要使用一些行和容器。永远不要在col-sm-6上使用css。因为它会破坏默认功能。使用如下代码： -

<!DOCTYPE html>
<html>
<head>
	<title></title>
	  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
   
</head>
<body>
	<style type="text/css">
		.text{

            float:left;
            width :50%;
        }
        .main{

            float:left;
            width :100%;
            background-color: skyblue;
            overflow: scroll;
   			 max-height: 200px;
        }
        #header,#footer{
             float:left; 
             width :100%;

        }
	</style>
	<div id=header class=form-group form-group-sm>
</div>
 <div class=" container-fluid main">
 	<div class="row">
    <div class="col-xs-6 text">
    	What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


    </div>
    <div class="col-xs-6 text">
    	What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


    </div>
</div>
  </div>
<div id=footer class=container>
</div>

</body>
</html>

Answer 3

试试这个，这可能会对你有所帮助：

{{1}}

页眉和页脚div是固定的，滚动条适用于middel div

3 个答案: