This question already has answers here:
How to make <div> fill <td> height
(6 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I'm trying to make a TABLE with table-layout:fixed be as high as the viewport; and have some large div in a cell that is scrollable.
This works ine in chrome; however; I can't seem to get it so work in Firefox.
See also this fiddle: https://jsfiddle.net/kw09ncjx/
HTML (all inline)
<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body style="height:100%; padding:0; margin:0">
<table style="table-layout:fixed; width:100%; height:100%; border-collapse:collapse">
<tr style="height:100%">
<td style="width:150px; vertical-align:top">
<div class="content">left too mucht text oh
noooz
</div>
</td>
<td>
<div style="width:100%; height:100%; overflow: auto;">
<div style="height:1600px; white-space:nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla leo et tellus
tempus, vitae gravida elit convallis. Donec porta luctus nulla non iaculis. In felis
ligula, volutpat sed neque sit amet, fermentum porttitor felis. In eget semper dui.
Proin ac mollis massa, eu tincidunt enim. Fusce et urna dapibus, elementum risus eget,
tempor quam. Cras sed enim sit amet lacus feugiat interdum a vel enim. In in leo
ullamcorper, dapibus augue quis, mollis enim. Nulla feugiat tortor eget nisi sodales
tempus eget eu felis. Nam sit amet lacus erat. Ut metus magna, fermentum eu metus vitae,
scelerisque semper turpis. Sed varius gravida nisi eu pellentesque. Etiam convallis
dapibus eleifend. Nam rutrum blandit turpis non ornare. Proin interdum lorem et augue
ultricies venenatis. Morbi dolor dolor, mattis et fermentum eget, varius non ipsum.
<br>
Sed ut dignissim ex. Curabitur convallis est eu dui maximus feugiat. Mauris interdum,
justo ac porta tincidunt, magna metus efficitur orci, eu vestibulum lectus ligula
iaculis nunc. Vestibulum accumsan ullamcorper egestas. Aliquam erat volutpat.
Suspendisse eget ultricies diam, nec luctus libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Praesent venenatis nibh non dui ullamcorper, at vestibulum
orci semper. Aenean metus felis, lobortis at nisl nec, iaculis convallis erat. Phasellus
eu ultricies elit. Suspendisse vitae varius enim. Donec eget ante feugiat, egestas eros
at, bibendum ligula. Nullam in rutrum quam. Suspendisse sit amet metus accumsan diam
pellentesque rhoncus. Aenean dignissim, odio tincidunt dictum sollicitudin, nulla nibh
tincidunt eros, vitae cursus erat elit vel tortor.
<br>
Duis vitae faucibus nisi. Nulla facilisi. Phasellus vitae dui lectus. Quisque vehicula
sit amet augue eget posuere. Cras tincidunt fringilla massa vitae tristique. Donec
semper odio ut tempus venenatis. Sed euismod malesuada nunc, pharetra interdum augue
porta aliquet. Phasellus eu ex vel felis bibendum auctor. Donec dapibus, dui vitae
ornare pharetra, lorem felis egestas mi, non convallis quam enim et neque. Curabitur eu
felis eu nisi aliquam varius vitae ut erat. Nulla porta, odio sit amet commodo vehicula,
erat eros tincidunt quam, eget lobortis est diam quis ipsum. Proin rhoncus magna a urna
varius mollis. Nam ultricies sapien condimentum, scelerisque lorem nec, tristique risus.
Duis eleifend nunc vel suscipit laoreet.
<br>
</div>
</div>
</td>
<td style="width:40px; background-color: #ccc">
right
</td>
</tr>
</table>
</body>
</html>
It is just a problem that exists in firefox? Or am I doing something that causes undefined behaviour?
Related
OVERVIEW
I am building a website to showcase my blockchain and cybersecurity projects I'd worked with. So far, I'd implemented two pages of my website using bootstrap v5.1.3. I'm no front-end developer, but still I wanted to build something of my own.
Currently, I'm writing the description of one of my projects, and later I will add some images into it.
PROBLEM
I'm currently facing the issue of an horizontal bar showing if I write too much paragraphs in the page and I don't know how to make it disappear.
I'm trying to solve this issue so that all the paragraphs are responsive and only appear within the viewport width of a screen, and don't overflow creating the horizontal bar.
Check the image below for a better explanation.
IMAGE
QUESTION
How can I solve this only using bootstrap v5.1.3?
WEBPAGE CODE
/* test.css */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f;
}
body {
display: flex!important;
}
.wrapper {
background-color: #0f0f0f;
}
.text-center.h1 {
color: #F4364C !important;
font-size: 4vw !important;
}
.h6 {
color: #F4364C !important;
font-size: 1.25vw !important;
opacity: 0.5 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>Project 1 | XXX XXX</title>
<!-- hack fonts -->
<link href='https://cdn.jsdelivr.net/npm/hack-font#3.3.0/build/web/hack.css' rel='stylesheet' >
<!-- stylesheet -->
<link href='test.css' rel='stylesheet'>
<!-- bootstrap-5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-5.1.3 script bundle with popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100 wrapper">
<!-- Project Title -->
<div class="container-fluid my-auto">
<p class="text-center h1"><span>Astronomy Star Registry</span></p>
</div>
<div class="container-fluid my-auto">
<p class="h6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non nibh sit amet eros ullamcorper tincidunt. Curabitur sed imperdiet erat. In facilisis urna magna, ut mollis est posuere nec. Duis non neque vel libero dignissim dictum. Nullam scelerisque, sem porttitor dignissim blandit, enim felis condimentum enim, non cursus felis ex vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc lectus odio, finibus nec porta non, varius pulvinar eros. Aenean eget vulputate lorem, sed mollis ipsum. In mollis iaculis sem, quis sodales metus sodales quis. In nec efficitur libero, quis pharetra turpis. Nunc a felis vestibulum lacus feugiat euismod. Integer id diam a arcu dictum imperdiet nec at libero. Aliquam lorem dui, faucibus non posuere vel, venenatis vel augue. Aenean lorem ex, eleifend ut dictum a, semper nec risus. Nunc varius erat tortor, vitae sagittis sem vehicula non.
</p>
<p class="h6">
Aliquam erat volutpat. Pellentesque sagittis, nisi ac tempor lobortis, lacus neque posuere libero, vel maximus nibh dui non massa. Nulla at lectus vestibulum, tristique nisi at, vulputate ex. Vestibulum sit amet pharetra tortor. Sed felis nulla, finibus ut ipsum eget, pretium mollis quam. Proin urna metus, cursus non turpis vel, elementum blandit nulla. Nulla eu accumsan ipsum. Donec sodales tellus a turpis dapibus tincidunt. Praesent luctus vestibulum magna, ac feugiat metus ullamcorper eu. Mauris non elementum nunc, sed sagittis risus. Cras sed elit laoreet, faucibus ligula quis, tempus quam. Donec posuere eget eros eu pulvinar. Vestibulum justo augue, feugiat elementum erat sit amet, tempor porttitor urna. Integer malesuada mauris et ultricies sollicitudin.
</p>
<p class="h6">
Cras hendrerit quis velit vel molestie. Proin ut velit metus. Sed semper et neque non rhoncus. Cras semper dui eget eros tempus, sed malesuada nisi dignissim. Aliquam ante dolor, ultricies quis varius at, pellentesque nec urna. Mauris sit amet commodo nulla, ac malesuada lacus. Proin bibendum quis quam vel volutpat. Ut pulvinar tincidunt vehicula.
</p>
<p class="h6">
Phasellus sit amet vulputate neque, id mattis velit. Vivamus porttitor tellus ac est dictum lacinia. Aenean tincidunt tempus fringilla. Sed aliquam nibh ut turpis condimentum, eget malesuada nibh iaculis. Ut tincidunt at nisl vel tristique. Nam quam nunc, lacinia eget augue dictum, aliquet aliquam lectus. Aenean eleifend quam nec est tempus imperdiet.
</p>
<p class="h6">
In nec leo at tellus bibendum blandit sodales at neque. Sed vel dolor in tellus lobortis imperdiet venenatis in lectus. Ut ex ex, bibendum in fringilla et, vestibulum id mauris. Nam eu lorem nisi. Donec vitae fermentum est. Quisque sodales imperdiet felis, viverra consectetur enim egestas a. Duis leo orci, malesuada nec dolor ac, efficitur consequat dui. Aliquam lobortis commodo viverra.
</p>
<p class="h6">
Nunc vulputate ultricies metus in molestie. Mauris ultrices metus feugiat augue mollis ultrices. Quisque ac mattis enim, sed suscipit orci. Fusce eu enim tempor, bibendum ligula quis, faucibus ligula. Aenean nec iaculis tortor, eu suscipit sem. Proin in elit at lectus euismod lacinia. Quisque ac auctor felis, eget ultrices orci. Curabitur accumsan, massa dictum pellentesque feugiat, mauris velit tincidunt mi, ut porta nisl nibh id nisi. Nam non facilisis arcu. Aliquam eros est, elementum a leo sit amet, porttitor euismod ligula. Maecenas tellus massa, molestie ut ultrices at, finibus ac mauris.
</p>
<p class="h6">
Aliquam congue faucibus libero. Aenean sed suscipit ipsum. Aenean varius eleifend metus in pulvinar. Ut dapibus condimentum vehicula. Sed dictum arcu nulla, eget semper turpis fermentum at. Nam congue pretium rutrum. Mauris sit amet mauris sagittis, pulvinar nunc et, posuere diam.
</p>
<p class="h6">
Nunc tortor elit, interdum eget lacinia sed, tincidunt quis ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nunc eu nibh pulvinar eleifend. Pellentesque porttitor feugiat placerat. In at felis est. Etiam scelerisque velit pharetra, blandit erat non, mattis ex. Aenean congue tortor nec diam maximus, eget auctor nisi accumsan. Sed at dignissim sem, eu placerat tellus. Curabitur lobortis dui nec lorem gravida pellentesque. Duis sagittis, tortor sit amet dapibus finibus, nisi lacus maximus tellus, nec convallis orci velit non libero. Cras sodales, sem in sodales tincidunt, nisi magna facilisis felis, imperdiet elementum erat turpis a dui. Duis non felis pretium, viverra dui eget, condimentum erat. Nunc lobortis convallis felis, ac scelerisque sem cursus a. Ut in gravida tortor. Cras porttitor sapien sem. Aenean cursus erat et libero scelerisque placerat.
</p>
<p class="h6">
Suspendisse potenti. Sed varius ipsum sem, imperdiet vehicula orci pharetra sit amet. Nulla facilisi. Integer faucibus sed tellus quis cursus. Donec lacinia varius ipsum, vitae bibendum justo pharetra vel. Nunc facilisis a dolor sit amet maximus. In nec leo iaculis, pharetra tortor ac, imperdiet arcu. Duis non rhoncus enim, vehicula tincidunt orci. Ut in augue at ante sagittis efficitur ac eget tortor. Nunc eget felis ac quam tempor volutpat. Phasellus id volutpat tortor. Sed cursus eros at interdum convallis. Morbi ullamcorper felis eget massa porttitor pulvinar sed vitae purus. Ut iaculis ante eget ipsum congue, ut efficitur diam condimentum. Etiam lobortis dolor est, sed fringilla diam placerat eget.
</p>
<p class="h6">
Vivamus consectetur, nisi in dapibus vehicula, ipsum eros congue nunc, a posuere nisl mauris vitae sem. Sed interdum placerat commodo. Quisque id molestie sapien. Vestibulum vitae tempus ligula. Morbi eu molestie risus. Vivamus ac sapien tincidunt, hendrerit nibh ut, sagittis lacus. Maecenas pellentesque elementum libero non pretium. Proin in sodales massa. Praesent eu blandit libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
</html>
Please remove min-vw-100 class from your div
<div class="d-flex flex-column min-vh-100 wrapper">
I'd like to get non-scrolling background div on page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="back"/>
<div class="front">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis tortor, semper id suscipit vel, bibendum eu magna. Nullam a libero nisi. Fusce eget elementum augue. Ut tellus leo, dignissim varius finibus a, aliquet ut turpis. Proin non elit luctus, maximus nunc ac, auctor elit. Nullam erat ante, faucibus ac viverra eget, finibus nec ipsum. Vivamus sit amet purus accumsan justo finibus rutrum eu nec nunc.</p>
<p>Suspendisse eros lorem, luctus vitae volutpat ultricies, egestas et risus. Morbi fermentum iaculis nunc, ac tincidunt elit tristique sed. Aenean efficitur velit elit, vitae efficitur ex lobortis non. Etiam in orci ut libero lobortis laoreet. Suspendisse efficitur et sem non bibendum. Nam iaculis, mi in pharetra auctor, diam tellus commodo eros, eget volutpat ipsum enim vitae justo. Sed non ullamcorper odio, ac euismod ligula. Proin euismod eleifend convallis. Vivamus maximus accumsan dignissim. Morbi interdum magna sit amet tempor lacinia. Vivamus nec mi ligula. Donec tortor ex, commodo a est sit amet, volutpat gravida risus. Mauris vitae malesuada est. Curabitur blandit posuere ligula sit amet feugiat. Sed est tellus, cursus eget laoreet et, imperdiet eget dui. Donec facilisis, leo at mollis maximus, sapien purus lacinia mauris, ut fringilla turpis nibh finibus nunc.</p>
<p>Maecenas eget lorem posuere, tincidunt massa sit amet, vehicula diam. Nunc vel consequat nulla. Etiam volutpat volutpat fringilla. Suspendisse potenti. In mattis ex non ex iaculis, eu gravida nulla ultrices. Curabitur ut sem purus. Donec quis tempor lorem, faucibus condimentum eros. Donec massa dui, euismod non tincidunt sed, tempor id nisl. Pellentesque varius mollis nibh.</p>
</div>
<script src="script.js"></script>
</body>
</html>
My style.css looks like:
.back {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: lightblue;
}
.front {
position: relative;
}
What I expect - my long text scrolled over lightblue background (first div).
Whit I've seen - scrolling locked, I see just on-screen portion of long-text. So, div.back seems to be at top of z-index stack, when I expect opposite.
Why it's happen?
Thanks to #Alohci:
<div class="back"/> is invalid.
Correct is <div class="back"></div>
It seems that mobile selection on iOS devices does not work correctly when text is contained within an iFrame that is offset (padded, margined) from the top of the page.
In the example below, if one opens the page: https://viking2917.github.io/mobileselectionbug/
on an iOS mobile browser, and them tap-and-hold on the word "amet" in the first line to select it, then attempt to expand the selection by dragging the text selection drag handles, the drag handle will immediately jump down to near the bottom of page, and if you drag it around you will see the drag handle is offset from your finger (looks like by the amount the iFrame is offset from the top of the page).
The HTML to reproduce this (hosted at the link above):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<div>
<div>
<div style="height: 200px;"></div>
<iframe srcdoc="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim neque nec ante suscipit semper. Sed sit amet rutrum metus, in mattis ante. Quisque at nunc tellus. Maecenas ut rhoncus erat, sit amet ultricies augue. Aliquam et consectetur mauris. Pellentesque porttitor accumsan pretium. Vivamus risus lorem, varius in laoreet vel, interdum nec metus. Nam gravida vehicula lorem at lobortis. Curabitur sit amet libero ut nulla fermentum volutpat sed at mauris. Ut mollis at tellus vel tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lacinia iaculis odio, sed tincidunt massa accumsan a. Aliquam arcu urna, ullamcorper sagittis nunc eu, facilisis tempor felis. Ut fermentum justo in risus ullamcorper, tempus viverra neque venenatis. Aenean lectus sapien, interdum ut congue non, hendrerit sed diam. Suspendisse ante tellus, luctus eget ex eu, faucibus porttitor nulla.</p><p> Aliquam iaculis placerat tincidunt. Donec justo ligula, dictum ac volutpat accumsan, molestie eu est. Pellentesque lectus est, elementum sed finibus non, scelerisque a nunc. Cras id ornare turpis. Quisque consequat erat turpis. Vestibulum ut nulla feugiat, pretium eros et, dignissim nisi. Sed et finibus turpis. Morbi viverra vulputate lacus.</p><p>Sed in lorem laoreet, gravida metus nec, cursus nunc. Proin dignissim elit id urna imperdiet commodo. Nullam laoreet elementum risus vel tristique. Praesent aliquam ante id nibh condimentum, in semper lectus porta. Proin commodo leo sit amet finibus consectetur. Nam posuere lorem elit, at eleifend odio lobortis nec. Aenean ultricies tellus nec nunc porta, id hendrerit dui malesuada. Aliquam vel lacus feugiat tellus fermentum sollicitudin. Suspendisse consectetur ipsum ac ligula tincidunt molestie. Aenean vel ex eget justo pretium sodales eu sed lectus. Quisque malesuada rutrum tincidunt. Cras sit amet massa pulvinar, fermentum ante in, tristique diam. Etiam nec semper mauris. Donec ultricies purus ut est scelerisque eleifend imperdiet accumsan mi.</p>">
</iframe>
</div>
</div>
</body>
</html>
I can't see that I'm doing anything wrong, any ideas?
Really feels like a browser bug. This is broken on mobile Chrome, Safari and Firefox.
This is an iOS/Safari bug. The fix is in the beta for 12.2, to be released at some point. Details here: https://bugs.webkit.org/show_bug.cgi?id=193663
I have some A4 sized divs with different amount of content. I try to place footers in each page with page numbers. Footer should be fixed on the bottom of the page.
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
Here is a JsBin too, to play with.
When you're using position: absolute you have to correctly identify containing block:
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky) (from MDN).
In your case there's no containing block with position value other than static - so .footer elements position themselves relative to root html element.
Set position: relative on .page and everything will work:
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
As #fen1x said, you have to set the position of parent div to relative. Just add this CSS rule.
.page{
position: relative;
}
How to avoid content from a child div overflowing the parent container? This is probably one of the most frequent question ever asked and the most frequent and a working solution is to use max-height:100%, which ofcourse works.
The problem is when I cannot use 100%, for example, in the given jsfiddle, I have an header which takes some x pixel height. I can of course arbitrarily decrease the percentage but it is unstable when the window is resized.
JSFiddle - FUpsA
Edit:
I like to mention that the Header should not be a part of the scrolling content, hence using overflow:auto on the parent div is not an option.
According your reply on my comment i suggest to use css calc:
html
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div id="mainTextCont" style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
css
#mainTextCont{
height: calc(100% - 75px);
}
fiddle
Please add overflow:hidden; to your parent div and for child div set height less than parent div ie height:210px
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000; overflow:hidden;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; height:210px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
Overflow is for the parent and describes how to wrap the child contents.
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;overflow:auto;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum...
</div>
</div>
Updated Answer:
add overflow:hidden; in parent div sorry I did not notice that you don't want to change height.. now its as per your requirement.
Like this:
<div style="width:300px;overflow:hidden; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.
</div>
</div>
One of my colleagues came up with a very interesting solution and I was simply amazed! The solution is compatible with IE 5.5+ and its purely CSS.
He used the property of containers with postion:relative which modifies the scope of their child elements with position:absolute. more information about that at css-tricks
This is a sample structure of the solution, refer the fiddle for more details
<div id='parent' style='position:relative'>
<div id='header' style='height:75px'>
<!-- Header -->
</div>
<div id='child' style='position:absolute; top:75px;bottom:0px; overflow:auto'>
<!-- Content-->
</div>
</div>
Note that the height is set only for the static content and not for the dynamic content
JSFiddle - FUpsA - Solution
The problem is that the header takes up space. When you combine the headers height with 100% of the parent (percentages are based on the parent element) it is going to be over 100% of course.
What you should do is make the headers height one percentage and the text part other percentage.
For example:
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div style="height: 20%;">
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:70%">
...
</div>
</div>