【问题标题】:Header and Footer div are fixed and scrollbar for middel div [closed]页眉和页脚 div 是固定的,并且 middel div 的滚动条 [关闭]
【发布时间】:2023-03-23 23:23:01
【问题描述】:

我想在我的 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%;
}

我使用了溢出标签,但它不能正常工作。

【问题讨论】:

  • 你想滚动到哪里?
  • 编辑您的问题以修复 HTML 标记...它无效..
  • 没有类到第一类到第一个div
  • @Rupal for manl div.
  • 只需添加 max-height 然后使用 overflow:scroll

标签: javascript jquery html css


【解决方案1】:

当您添加的内容超过 .main div 高度时,它将是可滚动的

演示:

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

【讨论】:

  • 谢谢 :) 工作正常。
【解决方案2】:

使用一些最大高度或高度,然后使用溢出:滚动工作。在使用 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>

【讨论】:

    【解决方案3】:

    试试这个,这可能对你有帮助:

    <header>
           //header content
    </header>
    <main style="overflow-y:auto">
          //main content
    </main>
    <footer>
          //footer content
    </footer>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-11-20
      • 2011-05-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多