Related
$(function(){
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
var adscrtop =$(".header").offset().top
// 在 RWD 767以下不作動
if(window.screen.width>767){
if(scrollVal> adscrtop){
$(".banner").css({"position":"fixed","top":"60px"});
}else{
$(".banner").css({"position": "static"});
}
}
});
});
.header{
max-width:768px;
margin: 0 auto;
}
.nav{
position: sticky;
top:0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index:99;
}
.container{
display: flex;
justify-content:space-between;
}
.main{
position: sticky;
top:60px;
flex:2;
background-color: #9fe6a0;
padding:10px;
}
.banner{
flex:1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam. Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum! Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat. Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class"photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
Tonight try using jQuery to fix the brown block under the red block. When scrolling up, only the green block will go up!
The brown area is fixed below the red area, but there are some problems As I scroll up, the brown block goes to the left and goes behind the red block Would you like to help me see which side of my code I have written wrong? Which side did I get wrong? Thank you for watching my question.
PS. My English is not very good, please let me know if there is something wrong with my expression. Thank you. Below is my code`
There is a small mistake here.
Inside your scroll listener, you have written "position": "fixed".
Whereas it should've been "position": "sticky".
$(".banner").css({
"position": "sticky",
"top": "60px"
});
"position": "sticky" automatically makes the element stick at the given position while scrolling.
For more info on CSS Positioning, check this out.
Check the updated snippet
$(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var adscrtop = $(".header").offset().top
// 在 RWD 767以下不作動
if (window.screen.width > 767) {
if (scrollVal > adscrtop) {
$(".banner").css({
"position": "sticky",
"top": "60px"
});
} else {
$(".banner").css({
"position": "static"
});
}
}
});
});
.header {
max-width: 768px;
margin: 0 auto;
}
.nav {
position: sticky;
top: 0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index: 99;
}
.container {
display: flex;
justify-content: space-between;
}
.main {
position: sticky;
top: 60px;
flex: 2;
background-color: #9fe6a0;
padding: 10px;
}
.banner {
flex: 1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam.
Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum!
Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium
nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque
cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores
dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla
necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam
asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla
consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora
et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque
corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias
dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat.
Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class "photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
I implemented the tool as per the instructions at https://pixelcog.github.io/parallax.js/ (also watched a YouTube tutorial on it before that). It works perfectly on desktop sites (and shows graceful degradation on iOS devices as expected). However, it does not display the parallax effect on Android devices even after I add the attribute and value data-android-fix="false" to the relevant div element. What could be the reason? (See the table on the page linked above for explanation of how this flag works).
I have tested this on a Nokia 2.2 Android device. Some online emulators of other Android devices also seem to show the same problem. Sharing a code snippet below, please scroll to see the effect. Look forward to your responses!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<style>
.parallax-window {
min-height: 150px;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
color: yellow;
border: red 2px solid;
text-align: center;
}
.overlay-text {
z-index: 2;
position: relative;
background: black;
width: 80vh;
margin: auto;
}
</style>
</head>
<body>
<section id="mySection" class="bg-light">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellat cum incidunt unde assumenda libero accusantium eveniet adipisci quod cupiditate ea eum delectus earum sunt vitae voluptate quae fugiat, velit voluptas laborum! Maiores libero commodi
tenetur, cum quidem placeat nisi modi iste amet molestias consequuntur hic earum, beatae dolores distinctio qui dignissimos. Obcaecati et temporibus repellat undeplaceat blanditiis! Quasi obcaecati ab ipsum omnis porro, assumenda fuga aperiam molestias
recusandae quis sequi earum quam excepturi minima consequatur quaerat optio rem. Veritatis sapiente, modi dolore quas quam libero consequatur! Natus explicabo qui alias animi eum! Hic sunt nemo eius veniam debitis illo saepe natus dolorem odit amet
omnis inventore similique necessitatibus maiores et iure obcaecati, ut perspiciatis quia! Eveniet iusto fuga eius temporibus, impedit molestias iure pariatur at laborum error, voluptates omnis ad rerum dicta expedita. Culpa facilis, nam aperiam
optio neque possimus in aliquam eveniet id odio, modi ab magni sequi velit dicta nisi sint corporis cum, quae similique natus quod sunt. Et labore necessitatibus praesentium accusamus, voluptatibus aliquam
</p>
<div class="parallax-window" data-parallax="scroll" data-image-src="https://upload.wikimedia.org/wikipedia/commons/7/76/Mapamundi_en_blanco.png" data-z-index="1" data-speed="0.5" data-android-fix="false">
<h1 class="overlay-text">
Text over the parallax image
</h1>
</div>
<p>
voluptatum. Exercitationem dignissimos ratione assumenda nemo quaerat, non dolore doloribus esse et numquam ut nihil aliquid id similique inventore tenetur corporis amet. Expedita ipsam quas sed officiis libero maiores possimus corporis illo doloribus
dolores nihil quasi minima dolorem quia eveniet similique iste, iusto, non aliquid tempore ipsa ratione? Iusto sapiente voluptate, aut, dignissimos enim optio exercitationem ipsum minima earum assumenda consectetur, in minus hic deserunt? Commodi
officiis vero eligendi similique veniam? Dolorem illo veniam eius dolore vero doloremque, debitis excepturi earum, perferendis, aspernatur inventore. Aliquam, voluptates fugit tenetur facilis voluptatibus facere vero quidem perferendis voluptate,
temporibus nesciunt, sunt debitis fuga? Dolor libero commodi in deserunt pariatur veniam ad fugiat temporibus architecto corrupti hic maiores totam repellat repudiandae dolore cumque explicabo voluptatibus vitae quis, consectetur blanditiis quae
adipisci. Maxime, nobis voluptate quaerat similique culpa obcaecati laborum accusantium illum! Ullam molestias doloribus quasi repudiandae eveniet beatae totam maiores maxime accusamus laborum nobis, dolore debitis ea dolorem fugiat, iusto delectus
quia odio minima, voluptates sapiente! Praesentium unde saepe facere consectetur corrupti veritatis autem. Ipsa voluptas debitis dicta esse unde ipsum aut explicabo tempora recusandae quas quod delectus exercitationem dolores odit itaque deserunt,
beatae perferendis aspernatur animi excepturi consectetur. Nihil, voluptas vitae fugit blanditiis voluptatum non iste porro obcaecati accusamus explicabo beatae! Facilis maxime vero ducimus doloremque officia dolor, ad unde quae aliquam? Quos rem
rerum debitis cumque error. Maiores, cum quas consectetur culpa debitis error facere, ipsa quo rerum pariatur ab libero magni sint autem totam hic velit magnam odit atque? Quos optio porro, nulla assumenda quisquam repellat maiores. Quisquam sequi
modi, iure totam nam eligendi in corrupti officia quibusdam cumque ducimus assumenda illo sint rem fugiat quae harum quod odit at minus similique iusto iste vitae. Animi dolorem ab ipsum sint id vero tempore, earum culpa itaque officia. Vero voluptatem
expedita, quae illum iure autem architecto impedit in distinctio nulla possimus nesciunt molestiae ad amet assumenda rerum, consequuntur vel ullam deserunt aut velit distinctio tempore repellat commodi eius harum quas est reiciendis blanditiis quidem
molestias fugiat natus totam nulla itaque sed illo at. Consequatur illo, ipsam accusamus at porro eius tenetur repellendus! Nostrum facere saepe repellat, animi quibusdam voluptates laudantium corporis officiis temporibus ipsam corrupti numquam
modi atque eos, delectus tenetur necessitatibus vitae unde magnam possimus quos harum voluptatum! Excepturi nesciunt voluptatum impedit rem distinctio nobis sit modi pariatur quos illum quis, reiciendis iure obcaecati explicabo! Eum consequuntur,
assumenda aspernatur corrupti error quod modi. Debitis rem officia corporis beatae necessitatibus voluptatibus quas optio harum quibusdam accusantium commodi dolorem ad, velit, recusandae quia incidunt ab libero minus totam aperiam? Quas repellat
eveniet dolores culpa ipsa, doloremque voluptate ad velit, quam, excepturi laboriosam? Assumenda facilis, veniam laudantium voluptatibus vitae explicabo dolorem hic nostrum officiis, exercitationem nulla recusandae soluta maxime commodi perferendis
ipsam placeat accusantium! Doloremque consequuntur facere porro eum officiis? Cum repellendus qui iusto ducimus reiciendis ipsam! Porro, voluptates numquam temporibus perferendis ex explicabo, esse ab maiores illo molestias accusamus unde itaque
voluptate laborum beatae. Aperiam quia, provident error repudiandae impedit, explicabo minus, corrupti neque odit vel maxime officia ducimus commodi voluptates quo facere dolores. Pariatur, fuga soluta illo laborum modi consequatur reiciendis aperiam
explicabo recusandae illum itaque nobis corrupti magnam ea voluptatibus, ratione nesciunt ipsa voluptate minus labore nemo, ipsam officia. Quasi, ipsam iusto. Pariatur omnis eius non doloremque error praesentium architecto dolorem ex id nam quia
tenetur beatae nemo eos numquam officiis, modi magni aut. Tempore libero porro accusamus quas ipsa repellat, eligendi dolor possimus sunt id odit excepturi minus quae, animi placeat. Quasi, iste? Quos fugiat et sapiente, voluptates debitis quaerat!
Omnis magnam assumenda quam laborum dolorem deserunt qui sequi quis error adipisci voluptate reprehenderit voluptas, aut animi harum! Facilis harum laudantium praesentium repellat ducimus esse molestias cupiditate blanditiis enim aliquam, fugit
expedita velit maxime at cum sequi
</p>
</section>
</body>
</html>
.parallax-window {
min-height: 150px;
background: transparent":>
flex-direction: column;
justify-content: center;
color: yellow;
border: red 2px solid;
text-align: center;
}
.over(text)
z-index: 2;
position: relative}
width: 80vh;
margin: auto;
<html>
<head>
<script sec="httpd://Libraries/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script arc="HTTP://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> use a version range instead of a specific version
https://cdn.jsdelivr.net/npm/jquery#3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery#3/dist/jquery.min.js
</head>
<body>
<section id="my-section" class="g-light">
<div class="parallax-window" data-parallax="scroll" data-image-sec="HTTP://Wikimedia/Wikipedia/commons/7/76/Mandamus_en_blancmange" data-z-index="1" data-speed="0.5" data-iPhone-fix="false">
<1 class="overlay-<text>
Text over the parallax image
</h>
</div>
</section>
</body>
</html>
I was able to find a fix that works at this link: https://github.com/pixelcog/parallax.js/issues/184#issuecomment-451162802
Basically, in your parallax.js (or parallax.min.js) file (assuming you have it in your project file system and are not linking to it from a cdn), search for instances of navigator.userAgent.match, and then replace the Android next to it with something like Android123 to break the code which disables the parallax functionality. Refer to the link above for more.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Is it possible to make an overlay scrollbar?
Basically, I have a parent div with child divs inside. I'd like to make the vertical scrollbar overlay on top of the child divs instead of the scrollbar occupying space in the parent div and pushing the child divs to the left.
I'm planning to make the scrollbar transparent and only show it when the parent div gets hovered.
Is that possible with just css or does it need javascript? Please help thanks
I've a solution for you. Give a try to the code given below. And don't forget to put the simplescrollbar.js script in your code using this tag. <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
let scrollDiv = document.querySelector(".area");
SimpleScrollbar.initEl(scrollDiv);
body {
padding: 2rem;
background: #eee;
}
.area {
position: relative;
background: white;
height: 250px;
overflow: hidden;
}
.ss-wrapper {
overflow : hidden;
height : 100%;
position : relative;
z-index : 1;
float: left;
}
.ss-content {
height : 100%;
width : 100%;
position : relative;
right : -18px;
overflow : auto;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.ss-scroll {
position : relative;
background : rgba(0, 0, 0, .1);
width : 9px;
border-radius : 4px;
top : 0;
z-index : 2;
cursor : pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.ss-container:hover .ss-scroll {
opacity: 1;
}
.ss-grabbed {
user-select: none;
-o-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/simple-scrollbar.js"></script>
<div class="area" ss-container>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed cum quisquam sapiente ab consequatur natus ducimus obcaecati minus rerum adipisci laudantium debitis, perferendis pariatur iste provident dolorum ratione voluptate, repudiandae placeat inventore amet quasi ea facere? Delectus numquam vel inventore quasi excepturi. Minus nulla dolore ad animi pariatur provident assumenda dolorum voluptatem porro harum quo aspernatur error placeat sapiente, magnam, atque id molestiae dignissimos corrupti nobis doloremque iure. Voluptate nulla itaque vitae provident, voluptatem numquam sequi suscipit ducimus similique quidem, neque minima architecto tempore asperiores, nihil quae ratione dicta quia unde consectetur tenetur! Aspernatur eveniet dolorem nesciunt sint et eligendi enim quidem blanditiis tenetur! Blanditiis non modi amet, quaerat, vitae consectetur placeat porro dicta, ipsum natus ea possimus. Odio magni possimus modi nemo doloribus corrupti tempora. Aliquid eos error modi non repudiandae illum atque voluptatibus? Odio quod placeat facere sed eligendi, adipisci commodi natus magni soluta dignissimos, aperiam fuga magnam saepe itaque voluptas optio fugiat veritatis velit architecto dolore animi cum sequi quas accusantium! Vel iusto autem sit rerum maxime. Blanditiis libero natus at necessitatibus, odio sed perspiciatis exercitationem quisquam, officiis impedit, a nobis. Exercitationem hic reprehenderit illo, laboriosam ab eaque error sequi, ea expedita rem possimus repellendus numquam delectus est cum maiores neque nihil natus eius. Expedita esse quae, minus, est aspernatur ratione sed aliquid odio ut architecto nostrum provident neque placeat tempora, ipsum natus eum repellendus debitis alias nobis dolorem doloremque laboriosam voluptatem similique. Quisquam rerum molestias ab voluptas voluptatum sit, tenetur odio. Quidem nesciunt assumenda molestias velit harum deserunt culpa vitae beatae veritatis, eum, soluta mollitia numquam cumque! Facilis, dolores sunt aperiam sint molestias iure quidem architecto provident natus quae ab, quia labore tempore minima aliquid voluptatem earum optio tempora. Optio placeat eligendi praesentium quos atque. Similique aliquid neque nisi aliquam molestiae natus, recusandae ullam tempora et minus cum repellat cupiditate fugiat dolorem blanditiis consectetur ea commodi, maxime, odit voluptate hic non ab eaque? Eos exercitationem cumque quas harum aut deserunt ipsam cupiditate doloribus dolorum non doloremque adipisci est, explicabo mollitia voluptates laboriosam molestiae sapiente at ex laborum id? Voluptatem nostrum dicta, tempore eaque quibusdam praesentium fugiat laborum odio nemo adipisci, impedit porro iste, aut sunt consectetur soluta quia nisi repudiandae voluptatibus expedita ab rem iure. Dolorem nemo eaque architecto atque nihil, consequatur voluptates? Consequuntur vero a repudiandae molestias repellat provident minima facilis placeat, perferendis quo laudantium quisquam tenetur fugiat! Vitae repellat ducimus officia. Similique quod sunt quaerat, eum at esse iste. Pariatur sit animi mollitia! Molestiae, quia voluptatum? Expedita, voluptas explicabo. Rerum soluta dolorem expedita optio nostrum ex placeat laudantium minima voluptate, cum neque beatae, pariatur dicta error rem eum aliquam a deleniti quidem doloremque iure aperiam illo atque animi! Soluta facilis eligendi iure magnam. Quasi, quam numquam explicabo quas aliquam cum natus quod iusto, eligendi tenetur ex facilis, modi ut accusantium quibusdam nostrum labore! Provident laborum dolore ipsa sit. Dolore totam tempore quisquam adipisci iste tenetur ducimus saepe quae asperiores quibusdam possimus, maxime voluptatibus non eum praesentium quas dolores similique fugiat placeat numquam illum omnis autem voluptatum! Impedit exercitationem quam quisquam nisi consectetur minima optio dolore dicta! Maxime qui fugiat, beatae possimus modi fuga, unde, adipisci culpa magnam eum a velit. Voluptas libero eos dolores consequuntur nisi corrupti vel rem doloremque ut consequatur, odit magni esse aliquid aperiam possimus eveniet, magnam quaerat exercitationem. Maiores cum officiis reprehenderit ea nam, iure magni esse quos velit praesentium eius unde, laudantium fugit vitae quasi temporibus. Iste fuga iure numquam velit culpa exercitationem officia quis beatae? Deserunt sint eum accusantium, blanditiis fugit harum ex omnis qui officiis magnam nobis eius voluptatibus tenetur, rem dignissimos aut et tempore ipsum cumque commodi laudantium? Maxime praesentium, alias dolores, eos veritatis velit ex ut aliquam tempore est corporis dolorem. Odio, rem ratione. Numquam repellat cum rerum libero sapiente itaque corrupti in ut nihil culpa vitae, laborum molestias nostrum repudiandae eligendi sequi quo officia quibusdam modi commodi consequuntur nisi nobis vero voluptates. Praesentium officia rerum a incidunt ratione, odio quaerat alias, optio repellendus doloremque natus vero quae debitis dolores dignissimos voluptas labore accusantium aliquam asperiores ut eius dolorem. Dolor assumenda at deserunt numquam atque delectus labore, eum, aut dolorem ex, et hic vel rerum fugit! Et tempore harum natus illum dicta maxime magnam delectus ad praesentium reprehenderit nihil nulla aliquid error, fuga ratione dignissimos cumque temporibus blanditiis. Eum doloribus sed odit exercitationem quia quibusdam vero impedit id harum molestias! Distinctio iusto aspernatur quaerat tempora pariatur iste eaque corrupti, vel magnam temporibus recusandae possimus perspiciatis itaque repellat mollitia reprehenderit hic autem quis ex maxime laborum exercitationem placeat ab. Saepe provident incidunt, modi porro aut magni ducimus odit ut minima perferendis, itaque nobis rem explicabo dolor. Voluptates dicta in error nulla vitae corporis fugiat optio. Blanditiis voluptatem sunt nihil? Nihil, dicta excepturi explicabo repellendus enim odio sed totam, fugit error nulla provident omnis saepe illum iste animi? Consequatur, veniam! Voluptates voluptatem veritatis reiciendis. Illo, veritatis pariatur ratione id minima cupiditate. Quibusdam quod deserunt alias ipsam culpa et modi fuga aut id autem. Minima neque nesciunt eligendi accusamus quam deserunt repellendus sequi culpa, cumque quaerat beatae mollitia doloribus? Nisi quibusdam quisquam temporibus. Quas laudantium pariatur totam, voluptas tempora, ad culpa dignissimos blanditiis ut, explicabo voluptatem repellat saepe tempore ipsam? Qui adipisci labore mollitia at, id facere unde aspernatur? Quis numquam a reiciendis vero possimus ut autem. Voluptatibus quas, officiis hic mollitia vero unde iste dolores delectus molestias. Perspiciatis, sit dicta officiis facere minus voluptatem qui iusto est nulla neque perferendis non ipsum minima ipsa quidem consequatur delectus. Ducimus qui quaerat nostrum nulla quis veritatis! Labore quod illo, debitis necessitatibus, repellendus omnis vitae voluptas sequi quia consequuntur velit asperiores sint porro fuga facilis vel voluptatum magni quibusdam delectus quis distinctio? Excepturi tenetur doloremque dolor. Nostrum voluptates harum quis quidem hic odit magni atque repudiandae illum, repellat et explicabo a possimus nesciunt tempore rerum sequi, blanditiis officiis. Error ullam quae labore veritatis eaque reiciendis tempore doloremque quod dignissimos optio tempora perspiciatis, voluptatum non? Animi mollitia dolorem quae impedit quos laudantium perferendis, dolore ut consectetur deserunt veritatis deleniti ipsa excepturi!
</div>
On change content in div block jquery scrollbar is disappear, $('.scrollbar-outer').css('overflow', 'auto) not working, how to fix?'
i'm trying to change class to add overflow to .txttb, but still the same
jQuery(document).ready(function() {
jQuery('.scrollbar-outer').scrollbar();
});
$(document).on('click', '.hhh', function(e) {
e.preventDefault();
$('.txtb').html('dorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, harum fugit doloremque amet qui. Facilis, consectetur ab fuga, dolorem sapiente tempore laboriosam voluptates nulla beatae architecto placeat enim inventore, nemo praesentium quisquam quia! At voluptatibus sit error recusandae animi, provident atque laborum iusto esse illum consequatur aspernatur nisi, eveniet harum voluptates sapiente blanditiis quibusdam eos dolorum quisquam nulla eligendi! Corporis excepturi temporibus quibusdam quasi, ut assumenda aut, aliquid officiis facilis minus nisi. Quam est itaque temporibus, ex soluta blanditiis sapiente consectetur quae quasi mollitia ut in ipsum modi tempore sint quisquam eos laboriosam, inventore, optio delectus reiciendis, assumenda doloremque explicabo.')
$('.scrollbar-outer').css("overflow", "auto");
})
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.main_block {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.txtb {
width: 350px;
height: 200px;
color: #313131;
border: 1px solid #33ffbd;
overflow: hidden;
overflow-y: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css">
<div class="main_block">
<div class="txtb scrollbar-outer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error, vero. Tenetur beatae labore facere modi! Cupiditate in tempora quaerat blanditiis voluptatibus magnam facilis rem, quo sequi necessitatibus excepturi cumque, dolore. Molestias non
nisi porro delectus doloribus inventore vero asperiores culpa mollitia aliquam fugiat suscipit nostrum sed quibusdam voluptatibus, enim, accusantium quam, debitis dolore minus modi a. Quos ex ut, qui, quae modi assumenda veritatis sapiente voluptates.
Eius quidem quas, quos veritatis, cumque consequatur soluta, alias velit sed inventore itaque dolor. Alias, rerum, veritatis! Porro vero, delectus quam repellendus doloremque vitae facilis quod expedita commodi iure impedit corporis, sunt voluptatum
quaerat, natus. Doloribus culpa ea, laudantium eos illo iure qui aperiam quod, repellat reiciendis quos rem, quisquam vitae officiis nam unde itaque dignissimos provident dolor dolorem aspernatur, possimus corrupti in! Maxime, nostrum, perspiciatis
vero quos similique illo nulla praesentium id soluta explicabo quidem quam! Nesciunt quasi nisi, facilis distinctio quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia natus recusandae quibusdam exercitationem cumque inventore
est illum! Illo, a, unde. Accusamus veritatis quibusdam illo numquam dicta recusandae, natus voluptatum magnam provident, fuga consectetur eaque unde porro facilis, corporis distinctio excepturi, fugiat illum nesciunt cupiditate voluptatem. Aut incidunt
iusto animi quidem fugit, quae dolorum voluptate aliquid officiis natus commodi aspernatur dolore, at neque vitae quam saepe quibusdam consectetur cumque impedit necessitatibus ad nam, vero. Ipsam saepe odit neque molestias quod asperiores aspernatur
voluptas pariatur? Impedit tempora quod deserunt, soluta cupiditate dolores quasi doloribus suscipit placeat molestias nemo esse iste harum odio natus saepe quae sapiente explicabo sint ullam minus asperiores magnam quia excepturi. Mollitia velit
expedita rem, vero debitis ratione odit modi quidem explicabo molestiae in facere cupiditate sit, quaerat magnam tempora aspernatur illum voluptatibus sunt, unde nesciunt numquam laboriosam. Possimus iusto doloribus delectus magni, cum in eaque, nam
consequatur voluptas eius dignissimos, magnam molestias architecto. Deserunt unde adipisci accusantium dolorem, praesentium consectetur minus amet molestias officiis veritatis sed, illo recusandae quod! Perferendis illum ab fugiat cupiditate iste
tempore pariatur, excepturi numquam odio soluta, culpa laborum suscipit sint quo quaerat repellat quos enim, voluptate impedit saepe minus doloribus. Sunt laudantium, soluta.
</div>
<button class="hhh">Hello</button>
</div>
Instead of $('.txtb).html, use $('.txtb.scroll-content').html(
jQuery(document).ready(function() {
jQuery('.scrollbar-outer').scrollbar();
});
$(document).on('click', '.hhh', function(e) {
e.preventDefault();
$('.txtb.scroll-content').html('dorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, harum fugit doloremque amet qui. Facilis, consectetur ab fuga, dolorem sapiente tempore laboriosam voluptates nulla beatae architecto placeat enim inventore, nemo praesentium quisquam quia! At voluptatibus sit error recusandae animi, provident atque laborum iusto esse illum consequatur aspernatur nisi, eveniet harum voluptates sapiente blanditiis quibusdam eos dolorum quisquam nulla eligendi! Corporis excepturi temporibus quibusdam quasi, ut assumenda aut, aliquid officiis facilis minus nisi. Quam est itaque temporibus, ex soluta blanditiis sapiente consectetur quae quasi mollitia ut in ipsum modi tempore sint quisquam eos laboriosam, inventore, optio delectus reiciendis, assumenda doloremque explicabo. impedit saepe minus doloribus. Sunt laudantium, soluta. it saepe minus doloribus. Sunt laudantium, soluta ')
$('.scrollbar-outer ').css('overflow', 'auto');
})
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.main_block {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.txtb {
width: 350px;
height: 200px;
color: #313131;
border: 1px solid #33ffbd;
/* overflow: hidden; */
/* overflow-y: visible; */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css">
<div class="main_block">
<div class="txtb scrollbar-outer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error, vero. Tenetur beatae labore facere modi! Cupiditate in tempora quaerat blanditiis voluptatibus magnam facilis rem, quo sequi necessitatibus excepturi cumque, dolore. Molestias non
nisi porro delectus doloribus inventore vero asperiores culpa mollitia aliquam fugiat suscipit nostrum sed quibusdam voluptatibus, enim, accusantium quam, debitis dolore minus modi a. Quos ex ut, qui, quae modi assumenda veritatis sapiente voluptates.
Eius quidem quas, quos veritatis, cumque consequatur soluta, alias velit sed inventore itaque dolor. Alias, rerum, veritatis! Porro vero, delectus quam repellendus doloremque vitae facilis quod expedita commodi iure impedit corporis, sunt voluptatum
quaerat, natus. Doloribus culpa ea, laudantium eos illo iure qui aperiam quod, repellat reiciendis quos rem, quisquam vitae officiis nam unde itaque dignissimos provident dolor dolorem aspernatur, possimus corrupti in! Maxime, nostrum, perspiciatis
vero quos similique illo nulla praesentium id soluta explicabo quidem quam! Nesciunt quasi nisi, facilis distinctio quae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia natus recusandae quibusdam exercitationem cumque inventore
est illum! Illo, a, unde. Accusamus veritatis quibusdam illo numquam dicta recusandae, natus voluptatum magnam provident, fuga consectetur eaque unde porro facilis, corporis distinctio excepturi, fugiat illum nesciunt cupiditate voluptatem. Aut incidunt
iusto animi quidem fugit, quae dolorum voluptate aliquid officiis natus commodi aspernatur dolore, at neque vitae quam saepe quibusdam consectetur cumque impedit necessitatibus ad nam, vero. Ipsam saepe odit neque molestias quod asperiores aspernatur
voluptas pariatur? Impedit tempora quod deserunt, soluta cupiditate dolores quasi doloribus suscipit placeat molestias nemo esse iste harum odio natus saepe quae sapiente explicabo sint ullam minus asperiores magnam quia excepturi. Mollitia velit
expedita rem, vero debitis ratione odit modi quidem explicabo molestiae in facere cupiditate sit, quaerat magnam tempora aspernatur illum voluptatibus sunt, unde nesciunt numquam laboriosam. Possimus iusto doloribus delectus magni, cum in eaque, nam
consequatur voluptas eius dignissimos, magnam molestias architecto. Deserunt unde adipisci accusantium dolorem, praesentium consectetur minus amet molestias officiis veritatis sed, illo recusandae quod! Perferendis illum ab fugiat cupiditate iste
tempore pariatur, excepturi numquam odio soluta, culpa laborum suscipit sint quo quaerat repellat quos enim, voluptate impedit saepe minus doloribus. Sunt laudantium, soluta.
</div>
<button class="hhh">Hello</button>
</div>
I'm struggling to create a page layout that has: a header which will expand to match its content, a footer that has a fixed height (which will never change) and a content section that fills the distance between the two that will scroll when necessary.
The difference between this and many other 3 row questions asked on SO is that I need the header to be fluid not fixed.
Here's an example of what I am after. It works perfectly in Chrome, however 40% of the target demographic use IE7 and this doesn't work in any version of IE.
It's worth viewing it as a full page.
html,
body,
form {
height: 100%;
margin: 0;
overflow: hidden;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table .tr {
display: table-row;
}
.table .tr.header {
background: #ccc;
}
.table .tr.content {
height: 90%;
}
.table .tr.footer {
height: 50px;
background: #ccc;
}
.table .td {
display: table-cell;
}
.innerContent {
height: 100%;
background: #f0f0f0;
overflow: auto;
}
<div class="table">
<div class="tr header">
<div class="td">
<b>Header</b>
<br />expands to show all available content
<br />Other content
<br />Some more content
<br />Even more content
<br />Additional content
<br />Extended content
<br />Enhanced content
<br />Ya ya ya
</div>
</div>
<div class="tr content">
<div class="td">
<div class="innerContent">
<b>Content</b>
<br /> Will fill the remaining space and will scroll if necessary
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
<div class="tr footer">
<div class="td">
<b>Footer</b>
<br/> Has fixed height and will never change.
</div>
</div>
</div>
Quirks
I can't use FlexBox because of IE7 although I would if there was a Polyfill available (I can't find one that supports IE7)
I can use HTML Tables (but would prefer not to).
I'm happy to use a JavaScript solution as long as its airtight, meaning if the content in the header changes the height, the content height needs to update as well; in fact, the version I am working with at the moment uses the following JavaScript to set the height of the content area:
function _makeContentScrollable() {
var $template = $(".table"),
$content = $template.children(".content");
$content.height(($(window).height()) - ($content.offset().top + $footer.outerHeight(true, true)));
}
This is re-called onresize but I'm unsure of the best way of calling this when the header height changes an example would be from an expanding/collapsing element in the header, short of calling a callback function on every script that might affect the height of the header which seems like a maintenance nightmare.
You don't need anything other than positioning. Check this out, which uses:
position: fixed
padding
This would give you a layout with fixed, scrolling (auto), fixed layout.
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
body {padding: 70px 0 50px;}
p {margin: 10px 0 0;}
p:first-child {margin: 0;}
.header, .footer {
position: fixed;
left: 0; right: 0;
top: 0;
background-color: #ccc;
padding: 5px;
max-height: 70px;
overflow: hidden;
}
.footer {
top: auto;
bottom: 0;
text-align: center;
}
.content {
position: fixed;
top: 75px; bottom: 35px;
left: 0; right: 0;
overflow: auto;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur tenetur amet quisquam, fuga nobis eligendi perspiciatis saepe inventore nam nihil, ducimus id soluta accusantium iusto! Modi itaque vel laudantium.</div>
<div class="content">
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iure id culpa provident autem dolor, ea sit excepturi accusamus deleniti maxime repudiandae minima expedita eligendi, quam iste ullam cumque. Nesciunt!</span>
<span>Itaque dolorem repudiandae qui repellendus error non inventore possimus cum! Praesentium nobis laboriosam illum voluptas quidem reiciendis incidunt, rem? Sapiente nemo, quam officia eveniet maiores sint. Culpa, modi eveniet vel.</span>
<span>Asperiores non, facilis ratione placeat culpa, saepe dicta obcaecati, nesciunt blanditiis iste nostrum! Rem, suscipit. Nesciunt voluptas aliquam deleniti autem vitae repudiandae, hic, similique vel. Eius omnis ex voluptatum at?</span>
<span>Enim facilis rem dolore tempore numquam iste sapiente id molestias cupiditate accusamus laborum eius consequatur magnam sequi iusto obcaecati officiis, nostrum? A eum error praesentium, in eos aperiam voluptatibus pariatur?</span>
<span>Ipsam cumque, ab sunt explicabo dolores voluptates repellat aspernatur, molestiae, corporis, impedit blanditiis minus praesentium facilis deserunt alias sequi adipisci a. Numquam explicabo, odit fugiat reprehenderit fugit dolor aliquam nulla.</span>
<span>Qui libero accusamus, eveniet quo ducimus temporibus quia consectetur nulla, dolores obcaecati fuga officiis excepturi sed error esse architecto necessitatibus assumenda aliquam at quidem quae illo! Blanditiis doloribus voluptatum, facilis.</span>
<span>Ipsa inventore beatae quibusdam praesentium sunt omnis nesciunt eos incidunt accusantium adipisci, vitae dicta, perspiciatis repellendus, laudantium quam eius consequatur minus, illum reprehenderit. Tempora culpa officiis itaque veritatis vitae rem.</span>
<span>Temporibus debitis repudiandae molestias praesentium expedita a aperiam quia veniam sequi delectus, harum atque incidunt consequatur tenetur exercitationem dolor at mollitia ea ad! Laborum, provident. Illum iste nam cumque dicta!</span>
<span>Est commodi tempore quos nisi voluptatem aperiam totam laudantium vero autem quisquam explicabo labore sapiente, ea quas tenetur doloremque pariatur iure excepturi repellendus quia harum sint, perspiciatis! Saepe asperiores, labore.</span>
<span>At quidem cum iusto pariatur dolor dolorem autem, corporis ipsum libero ipsa possimus fugiat aperiam dicta labore beatae ducimus veniam, molestiae nemo, cumque. Veniam mollitia itaque, aliquam porro hic enim!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere perspiciatis magni iusto porro, nam quis, vel architecto rerum provident adipisci eveniet delectus deserunt, beatae dolore! Maxime quibusdam non, suscipit perspiciatis.</span>
<span>Id dolorem assumenda, minus repudiandae velit facere atque quam sunt sapiente cum? Explicabo necessitatibus ipsam pariatur? Consequuntur exercitationem, sequi porro temporibus architecto a est, similique distinctio harum dicta libero accusantium.</span>
<span>Ipsa corrupti repellat quaerat ratione sapiente unde dolor mollitia possimus at, voluptates architecto aliquid suscipit, natus porro, iusto perferendis. Optio error, aspernatur. Quaerat hic nobis soluta suscipit eveniet dignissimos, pariatur.</span>
<span>Nemo aspernatur vitae non assumenda, similique sapiente totam porro laborum iste saepe facilis, reiciendis placeat impedit natus, itaque ipsam voluptatibus fugit ratione optio, sit iusto. Delectus ipsa officia voluptatem minima.</span>
<span>Sequi vero vel cupiditate porro ipsam, voluptates ad deleniti sunt magni ex adipisci dicta error amet eveniet cum facilis perferendis nemo cumque. Eveniet similique quaerat voluptas ex velit, labore molestiae.</span>
<span>Quibusdam iusto provident, neque amet, explicabo corrupti quia tempore voluptatibus dolorem dolorum sequi ex quidem tempora reprehenderit praesentium quod dignissimos. Laudantium, praesentium consequuntur. Dolore sequi, quos. Nobis blanditiis, porro aperiam?</span>
<span>Natus eius ex ullam nam magnam, facere cupiditate facilis animi soluta maiores reprehenderit illum rem quae, sit velit mollitia excepturi at dolorum explicabo. Ducimus animi, aliquid voluptas cupiditate quos odio!</span>
<span>Quo magni nostrum, asperiores delectus numquam qui cum impedit minus laborum explicabo, ab repellat aliquid nihil rem sunt praesentium, quaerat dolore quibusdam aut? Temporibus itaque perferendis cumque reprehenderit, quis recusandae?</span>
<span>Aspernatur quod at neque quaerat quidem architecto earum facere nisi, fuga vero deserunt eaque necessitatibus officiis, tenetur iste? Expedita maxime dolorem blanditiis sed exercitationem praesentium facere, commodi amet quis nemo.</span>
<span>Dolor atque laboriosam, provident tempora. Fugit delectus quidem modi cum voluptates, vel obcaecati iure reiciendis. Sit ad, sed tempora nobis atque consequuntur dolore ducimus voluptas. Sint animi mollitia cumque id.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum dolorem libero blanditiis nobis consequuntur corporis excepturi laudantium ea explicabo facilis dolores fugit, est, voluptatum adipisci incidunt magni! Iure obcaecati, facere.</span>
<span>Ducimus quidem voluptate voluptas est fuga consequatur pariatur, accusamus, deserunt quisquam excepturi. Culpa autem quia veritatis cupiditate soluta, quisquam, corporis assumenda, minus esse odit expedita consequatur aut laboriosam incidunt dolorem.</span>
<span>Ipsa aliquam eos velit repudiandae, porro ipsum aliquid et tenetur autem minus quisquam officia deleniti ut reprehenderit commodi natus quis, ab dolor repellat nostrum nobis eaque quo. Nulla, veritatis aspernatur.</span>
<span>Odit quisquam nam, facere obcaecati neque, eligendi dicta quos esse veniam quasi dolore vitae voluptatum autem corrupti iure vero ipsum unde, iusto ipsam at optio doloremque. Cumque necessitatibus, quisquam mollitia.</span>
<span>Provident culpa inventore rerum nemo itaque reiciendis, architecto adipisci laudantium, error, quidem labore omnis cupiditate aspernatur blanditiis magnam doloribus eveniet quasi. Similique incidunt eius, placeat laudantium ipsa blanditiis error libero.</span>
<span>Illum reiciendis exercitationem, cumque corrupti quibusdam fugit sit perferendis adipisci sunt eos ut placeat sequi excepturi esse porro veritatis recusandae non iste magnam unde ea ab aliquam natus, explicabo. Sapiente.</span>
<span>Fuga velit autem, nemo facilis enim earum nam voluptas omnis adipisci laudantium dignissimos, sint ad quibusdam minima ipsa quaerat consequatur officiis repellat ut ab, eius, voluptate quos assumenda! Maiores, necessitatibus!</span>
<span>Voluptatum amet deserunt saepe est maiores laborum, in quas deleniti hic iure animi debitis cum earum, qui possimus quisquam porro doloremque, sed eaque nemo aliquam labore dicta voluptatibus? Quibusdam, animi.</span>
<span>Nam dolorem non illo alias minus quis ratione eveniet nesciunt, tempora aperiam placeat fuga iure quidem quia sed iste voluptate consequatur, ducimus assumenda maiores impedit, saepe. Fuga perspiciatis unde eum?</span>
<span>Nesciunt sapiente, fugit deserunt, repellendus velit, possimus nobis doloremque rerum magni beatae dicta eos, quaerat nam labore. Cupiditate commodi necessitatibus ipsam laudantium dolores, nihil nam totam similique, neque provident accusantium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt asperiores recusandae corrupti quod magnam ea ratione eveniet excepturi, temporibus dolorem labore, impedit illo, debitis. Assumenda harum, consequatur obcaecati reiciendis. Aspernatur!</span>
<span>Sequi inventore blanditiis, non exercitationem saepe explicabo sapiente mollitia nam tempore enim, optio! Aliquam quam, magnam voluptates et laborum excepturi autem nostrum explicabo dolores harum vero cum fuga nesciunt, cumque.</span>
<span>Fugit, eligendi optio veniam, quo enim ipsum minus neque natus, vero eaque, consequatur corporis nesciunt quis quod mollitia sapiente recusandae suscipit doloribus possimus. Alias reprehenderit quod perferendis architecto ipsa, consequatur.</span>
<span>Nihil architecto minima, inventore, officiis itaque alias odio quibusdam amet? Minus quae aliquam, maxime. Nam pariatur aut quis, distinctio est, itaque. Blanditiis laboriosam molestiae deleniti commodi vel praesentium aperiam consequatur?</span>
<span>Qui a dolorum dicta, nihil perspiciatis reprehenderit rem esse voluptas porro, quod beatae error excepturi quam tempora, illo. Similique minus, unde fuga! Earum nesciunt maiores cumque quisquam quam iste numquam!</span>
<span>Nisi accusamus, nesciunt vel explicabo veniam laudantium sit delectus debitis id numquam mollitia accusantium itaque sed. Voluptatum, nostrum laborum illo labore veritatis, minima nesciunt repellat, a neque maiores est magnam!</span>
<span>Aspernatur ab reprehenderit doloribus ut hic deleniti eaque veritatis. Consequuntur non mollitia blanditiis vitae illo in cum rem minus a dicta optio dolorum facilis vero, at vel beatae earum. Corporis?</span>
<span>Ad quos expedita officiis odio autem! Neque non doloremque voluptatum, laudantium cupiditate voluptas voluptate earum explicabo dolores, nam nobis distinctio ad, aliquid recusandae deleniti doloribus architecto illo molestiae laboriosam odio?</span>
<span>Soluta, minima expedita, dolorem explicabo enim alias amet nam, sunt neque dolor saepe rerum dignissimos hic itaque accusamus atque provident. Ut at eum deserunt aspernatur ullam expedita tempora, exercitationem nemo.</span>
<span>Voluptatem, quae, praesentium? Maxime veritatis earum, autem quia minus quae asperiores dolor quo veniam non tenetur vero officiis beatae magnam ipsum aliquam odit rerum illum architecto provident voluptate. Architecto, aperiam.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestiae quibusdam officiis, sapiente maiores id cupiditate libero autem saepe magnam, quo necessitatibus dolorum iure fugiat perspiciatis praesentium tempora dolore ad.</span>
<span>Omnis et perspiciatis blanditiis nulla, non ipsam impedit dolore molestias eos nesciunt nam pariatur delectus temporibus tenetur esse, corrupti voluptatum commodi debitis! Maxime, doloribus hic reprehenderit in iusto provident optio.</span>
<span>Cupiditate amet, consequuntur neque esse architecto dolorum distinctio. Tenetur sapiente tempore possimus libero nam suscipit in commodi vitae, id eligendi cupiditate expedita facilis accusamus praesentium, a vero ipsum repellat explicabo?</span>
<span>Vero fuga dignissimos officiis. Voluptatum error iste, nihil pariatur odio voluptatem molestiae, sit ipsum officiis ex, sed modi ut doloremque provident expedita accusantium earum quidem eveniet ratione ea aperiam. Molestias!</span>
<span>Sed earum consequuntur ut ea quod officiis animi, nemo expedita sint ullam magni impedit dicta minima debitis, quidem, repudiandae architecto dolorem delectus? Aspernatur porro tenetur, quae quasi iusto earum, id.</span>
<span>Voluptas dolore voluptates enim cum quasi dicta atque vitae aliquid omnis incidunt possimus quis molestiae, necessitatibus porro molestias, recusandae autem consectetur, officiis dignissimos in. Quas incidunt odio obcaecati quod aspernatur.</span>
<span>Dolorum, temporibus adipisci dignissimos quod, modi ipsam voluptates ipsa autem necessitatibus perferendis magni, veritatis repudiandae maxime veniam repellendus quo minima quibusdam porro illo neque delectus molestiae facere ab. Reiciendis, sapiente.</span>
<span>Facere quam qui expedita tenetur optio reprehenderit odit aliquid, officia corrupti vel commodi deserunt nesciunt recusandae beatae quas assumenda iusto ex, quibusdam. Doloremque similique, sit nulla nemo tempora voluptates eum?</span>
<span>Magnam voluptas eveniet qui voluptatum cupiditate, natus blanditiis ipsam consequuntur, ex quia, odit. Velit maxime sint repellat totam, sit, nobis in temporibus quia pariatur praesentium magni ipsa harum eveniet, laudantium.</span>
<span>Dolorum amet laudantium maiores, modi fugit, harum sint ratione ex ad nihil at velit quam numquam corrupti, esse dolor praesentium laboriosam explicabo. In, itaque, suscipit adipisci nihil ab facilis praesentium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, autem ea nemo et provident, architecto minus deleniti laborum expedita earum omnis, voluptas officiis deserunt. Laudantium nesciunt fugit quae nulla reiciendis.</span>
<span>Officiis, vero magni aspernatur earum soluta qui animi optio nihil pariatur ad, molestiae possimus a omnis cum impedit ab atque ducimus, quas? Iste est alias voluptatem amet itaque assumenda obcaecati?</span>
<span>Reiciendis veniam laboriosam neque, vero odio nisi placeat vitae provident quia debitis omnis praesentium numquam dolores adipisci explicabo nihil recusandae, repudiandae velit esse expedita blanditiis! Rerum mollitia cum suscipit veniam!</span>
<span>Quaerat voluptatibus laborum, laudantium nisi dolorum officia id soluta cumque. Ex, voluptate doloremque placeat quo harum dignissimos architecto ipsam adipisci cum nisi repellendus quisquam ipsa dolorem odio aspernatur. Cum, distinctio.</span>
<span>Voluptates ut, quam earum non repellat sit aperiam facere id iste totam sint quidem nemo odit delectus ab culpa, sed voluptate ipsam quos commodi magnam. Ipsum quos reiciendis molestiae nesciunt.</span>
<span>Dolorum quis rerum architecto consectetur! Magni suscipit adipisci voluptates reiciendis eos et minus, inventore quod quisquam aliquid, molestiae, fuga nostrum ipsa! Velit debitis distinctio consectetur sed esse iste aspernatur, sit.</span>
<span>Dignissimos at, doloremque enim vero voluptatem mollitia fugit soluta corporis veniam similique sed temporibus deserunt quisquam eligendi, ducimus ut molestias sunt quibusdam. Perferendis officia, vero facere iste, libero voluptate numquam!</span>
<span>Repellat laboriosam eum magnam, nam explicabo assumenda fugit fugiat, cumque, laudantium a itaque repudiandae. Omnis, laudantium, expedita? Nisi iusto at aut, recusandae, non veniam harum tempora voluptates laboriosam sint laudantium.</span>
<span>Quasi quae rerum labore accusamus, optio est pariatur excepturi. Voluptatem tenetur fugit doloribus molestiae officiis fuga commodi voluptate, distinctio magni accusamus, labore sequi eligendi reprehenderit, id dicta ullam magnam ipsum.</span>
<span>Quidem dolor in reprehenderit, consectetur. Tempore consectetur provident aperiam ab ducimus obcaecati maiores illum voluptas ipsam beatae. Beatae porro magni, sint assumenda fugiat illum, consequuntur atque unde eligendi, quod id!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsum illo, facere soluta, enim placeat repudiandae exercitationem sed numquam ratione maxime eligendi dignissimos, ex voluptatum eaque aperiam! Veritatis, pariatur, deleniti.</span>
<span>Pariatur nulla ducimus, labore saepe temporibus, doloremque, minima totam odit harum corporis omnis impedit quod iusto mollitia culpa aliquid aut laborum earum et magnam fugit vitae deserunt vel. Atque, dignissimos.</span>
<span>Fugiat accusamus aspernatur corrupti, porro? Reiciendis placeat cupiditate ea dolorem magnam eligendi molestias distinctio numquam consequuntur fuga ad, atque quaerat saepe beatae delectus explicabo laudantium suscipit porro sed corrupti accusantium.</span>
<span>Omnis dolor pariatur iure nulla quasi exercitationem eum obcaecati perferendis laudantium, alias voluptatem sunt, sapiente ducimus similique totam, architecto minus, culpa. Impedit, veritatis, vero. Error nesciunt nemo laudantium doloremque harum.</span>
<span>Tempora ipsum obcaecati, nemo, a exercitationem, modi commodi explicabo voluptates possimus in, suscipit corporis beatae ad alias veniam culpa ipsa? Optio, quas, enim! Omnis, non, reprehenderit est illum numquam doloribus!</span>
<span>Impedit reiciendis quia perferendis, odit natus unde qui explicabo laudantium ipsam dolorem eligendi veritatis. Neque, sapiente mollitia consectetur tenetur delectus repellendus nihil quae magnam suscipit amet voluptatibus itaque, magni possimus!</span>
<span>Perferendis impedit voluptas aliquid reiciendis, ipsam rem consectetur suscipit corrupti tenetur. Ducimus saepe, quibusdam debitis hic veniam aliquid laborum cumque rerum minima magnam itaque, quod, excepturi blanditiis illo officia aliquam?</span>
<span>Cupiditate quasi aut adipisci at sed eaque quo, nulla aperiam labore rem ducimus illum ut quaerat nemo earum fugit accusantium, doloribus soluta molestiae sequi, odit quis quam sapiente voluptates nostrum!</span>
<span>Impedit pariatur ab quod hic rem illo voluptatibus, ipsum ipsam ut magnam quasi amet quae ipsa quo maiores est suscipit non sint delectus inventore. Autem, quibusdam, odit! Odio, dolorum, quo.</span>
<span>Qui ipsum ipsa sit laudantium commodi eligendi itaque, beatae tempora tempore. Porro expedita nisi minus eaque magni, culpa quibusdam. Doloremque dolorum cupiditate hic! Voluptatem esse hic error sit ab nihil.</span>
</p>
</div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>
Updated according to comments.
Update: For dynamic height, you could consider using this JavaScript (jQuery) code:
$(function () {
var resizeWin = function () {
$(".content").css("top", $(".header").outerHeight());
};
resizeWin();
$(window).resize(resizeWin);
});
JSBin: http://output.jsbin.com/wikeketequ