Make DIV Fixed so it wont scroll
Question
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:
<!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 answers
solution1
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:
.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). 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. 100vh = the height of the viewport.
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. 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. You also may want to play with your .orange height for consistency's sake.
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 ). 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. Hope this helps!
solution2
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>
solution3
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 ;)
}
solution4
0 2015-10-02 14:11:07
I think the answer could be quite simple by adding the css to the map:
position: fixed;
z-index: 10;
The content div ("replace" as I guessed?) could have:
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.