使DIV固定，因此它不会滚动
[英]Make DIV Fixed so it wont scroll
问题描述
I have a map and a list under a map. 
我在地图下有一张地图和一张清单。 When I scroll I want the map to stay fixed but the list under the map to scroll. 当我滚动时，我希望地图保持固定但地图下的列表要滚动。
My HTML is: 我的HTML是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/leaflet.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Local Market</a>
<ul class="right hide-on-med-and-down left">
<li><a href="stats.html">Statistics</a></li>
</ul>
<ul id="nav-mobile" class="side-nav left">
<!-- Statistics Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header"> My Statistics<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="stats.html">Basic Stats</a></li>
<li><a href="myBreweries.html"> My Top Breweries</a></li>
<li><a href="myStyles.html">My Top Styles</a></li>
<li><a href="myTaste.html">My Top Tastes</a></li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Statistics Drop Down End -->
<li><a href="list.html">My Lists</a></li>
<!-- Map Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">My Maps<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="mapTapped.html">Breweries Tapped</a></li>
<li><a href="mapVisited.html">Breweries Visited</a></li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Map Drop Down End -->
<!-- Discover Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Discover<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="topBeers.html">Top Beers</a></li>
<li><a href="topBreweries.html">Top Breweries</a></li>
<li><a href="topStyles.html">Top Styles</a></li>
<li><a href="topTaste.html">Top Tastes</a></li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Discover Drop Down End -->
<!-- Drink Local Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Breweries Tapped<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="localBeers.html">Top Local Beers</a></li>
<li><a href="nearbyBreweries.html">Nearby Breweries</a></li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Drink Local Drop Down End -->
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30"></a>
<ul id="search" class="right valign-wrapper">
<li class="valign">
<a href="#"> <img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30"></a>
</li>
</ul>
</div>
</nav>
</div>
<div id="map" style="height: 300px;" style="position:fixed;"></div>
<div id="replace"> </div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">Searching Stock</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4 个解决方案
解决方案1
0 2015-08-18 20:16:29
After playing with your live example in Chrome, here was the more specific answer that worked for me: 在Chrome中使用您的实际示例后，以下是对我有用的更具体的答案：
.navbar-fixed{
height: 10vh;
}
#map{
height: 50vh;
}
#collection{
height: 40vh;
overflow-y: scroll;
margin-top: 0;
margin-bottom: 0;
}
If you add this to your CSS, you should see what you're looking for (if I'm hearing you correctly). 如果你把它添加到你的CSS，你应该看到你正在寻找的东西（如果我听到你正确的话）。 Since percentages are defined by forces beyond the size of the viewport when it comes to height, you're going to want to use the unit vh instead. 由于百分比是由高度超出视口大小的力定义的，因此您需要使用单位vh。 100vh = the height of the viewport. 100vh =视口的高度。
In my sample CSS I've made use of the vh to add up to 100. This will make ALL of the 3 elements you have adjust to the full viewport height. 在我的示例CSS中，我已经使用vh加起来为100.这将使您调整到的3个元素中的所有元素都达到完整的视口高度。 Also note the dropping of the margins on the collection; 还要注意收集边缘的下降; these will add onto the heights and make the height just a little over 100vh, and you'll get some pretty sketch scrolling going on since the page is just barely over the size of the screen. 这些将增加到高度，使高度略高于100vh，你会得到一些漂亮的草图滚动，因为页面刚刚超过屏幕的大小。 You also may want to play with your .orange height for consistency's sake. 为了保持一致性，您也可能想要使用.orange高度。
If you want fixed height elements AND responsive height elements, you're going to have to turn to the calc() property in CSS ( https://developer.mozilla.org/en-US/docs/Web/CSS/calc ). 如果你想要固定高度元素和响应高度元素，你将不得不转向CSS中的calc（）属性（ https://developer.mozilla.org/en-US/docs/Web/CSS/calc ） 。 However, if you go this route, get ready for some spotty coverage across browsers. 但是，如果你走这条路，那就准备好在浏览器中进行一些不稳定的覆盖。 You're probably better off going the vh only route if you want a simple, cross-browser solution. 如果你想要一个简单的跨浏览器解决方案，你可能最好只去vh路线。 Hope this helps! 希望这可以帮助！
解决方案2
0 2015-08-18 20:22:45
像这样的东西似乎可以工作（你将固定地图的z-index设置为高于其他内容的值）：
<div id="map" style="height: 300px; position:fixed; top: 0; left: 0; z-index: 100"></div>
解决方案3
0 2015-08-18 20:31:13
Well.... 好....
#topDivthatNeedstoStay {
width:100%;
top:0;
left:0;
height: $height; // variable replace with actual
position: fixed; // boom
background: $yellow; // variable replace with actual
}
#elementYouwantoScroll {
width:100%;
height:$height; // variable replace with actual
overflow-y:scroll; // scroll
-webkit-overflow-scrolling: touch; // for mobile might as well pop this in as well ;)
}
解决方案4
0 2015-10-02 14:11:07
I think the answer could be quite simple by adding the css to the map: 我认为通过将css添加到地图中可以非常简单：
position: fixed;
z-index: 10;
The content div ("replace" as I guessed?) could have: 内容div（我猜的“替换”？）可能有：
position: relative;
margin-top: 300px;
z-index: 3;
Easier to debug and give an correct with actual content, the link above to live material did not have a map. 更容易调试并提供正确的实际内容，上面的实时素材链接没有地图。 Could you put up a jsfiddle? 你能忍受一个jsfiddle吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.