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
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>
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 2 years ago.
I understand the width & height of the visual viewport, as defined by this article, at least on a desktop, is the dimensions of the visible rectangle a user can see when they scroll to the top left of the page.
Why is the background red for, what looks like, the visual viewport when the html's height is 0?
html {
background-color: red;
}
body {
line-height: 20px;
margin: 0px;
}
<html>
<body>
</body>
</html>
A couple of misconceptions here.
First of all, not all CSS properties are inherited in the cascade.
You can look up any CSS property here and then see the formal definition. For instance, here is the formal definition for height:
Initial value: auto
Applies to: all elements but non-replaced inline elements, table columns, and column groups
Inherited: no
Percentages: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Computed value: a percentage or auto or the absolute length
Animation type: a length, percentage or calc();
You can see that height is not inherited, and it's default value is auto, whose definition says "The browser will calculate and select a height for the specified element.". When the browser calculates the height of an element, it will make it as small as possible while still fitting all the content inside.
The width property is also not inherited; to understand how width is calculated by default you must know the difference between block elements and inline elements. In short, a "block" element fills its parent's width, while an inline element (like span) takes up its minimum width. Every html tag is naturally either a block or inline element (except some special ones, like form fields, which are "replaced" elements), and you can always make a block element behave like an inline one (or vice-versa) using the CSS display property.
Things get a little less consistent with the root html element. Some browsers have that root element's initial height set to "auto", and some give it an initial minimum height of 100% of the viewport. The body element, however, will consistently have an unset (auto) height. Backgrounds on the html and body elements have an additional subtlety as described here.
Furthermore, the "visual viewport" (as you call it) is a scrolling container, meaning its children can be larger than the container. The scrollbar you see when your HTML is taller than the viewport belongs to the viewport, not to the html element.
You can reproduce this with divs:
.viewport {
height: 50px;
overflow: scroll;
}
<div class="viewport">
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie,
semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper. Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit
risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper
nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat. Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo
aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper
diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi. Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor
sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer
nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</div>
</div>
If you want the html element to be exactly the viewport size, with the body element scrolling inside the html element, you can do that with CSS.
You may or may not already know about the "Viewports Units", a measurement unit which can be used in CSS. This allows you to set size and distance measurements based on a percentage of the viewport's height or width. This is very useful for exactly this purpose.
html
{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: scroll;
background: #000;
color: #fff;
}
body {
min-height: 100vh;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
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?
I have some data on my screen in table form, and the width of the table is set to 500px. This looks identical in both IE8 and Chrome.
However, when I print this screen using Chrome, the print looks identical to what you see on the screen, i.e. the number of characters per line and the number of lines.
When I print it from IE8, the number of characters per line and the number of lines does not match when is seen on the IE8 screen.
Why is this happening and how do I get the printed output to match the screen output?
Here is the HTML table:
<table id="test-table" width="500px">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor, nunc sit amet aliquet sodales, enim nisi malesuada magna, eget auctor arcu urna eu nisi. Etiam gravida faucibus mauris in bibendum. Cras eu elit eget leo porttitor scelerisque nec eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque accumsan tellus dolor, quis convallis massa placerat ac. Donec eros metus, ornare eu risus ac, malesuada fermentum nibh. Integer facilisis ut velit a adipiscing. Maecenas in eleifend mi. Nullam feugiat pulvinar mauris. Duis ligula purus, fringilla et pretium egestas, scelerisque vitae dui.
</td>
</tr>
<tr>
<td>
Nunc suscipit et neque ac fermentum. Nam condimentum sit amet mauris eget consequat. Aenean gravida cursus ante, id ultricies eros suscipit nec. Pellentesque viverra velit faucibus diam gravida aliquet. Etiam vehicula massa nunc, sed accumsan quam mattis sit amet. Vivamus id ornare quam. In facilisis accumsan sodales. Morbi aliquet, augue in feugiat vulputate, sem neque ultricies mauris, quis facilisis risus dolor at ante. Duis dignissim lacus cursus mauris pulvinar cursus. Sed sed libero sed quam tincidunt euismod at sed mi. Nunc nec consectetur dolor. Quisque et accumsan neque.
</td>
</tr>
</table>
You can use the css media query for print to style how the printed version looks:
#media print {
/* your styles here*/
}