Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 2 years ago.
I've two elements (one p and another one img) in a simple container without styling (except background). I've specifically styled both of the elements to be inline-block and border-box but when the total of their length is less than 100% even, 99% only then they appear on same line.
What would possibly be the reason.
Here is the link to jsfiddle.
https://jsfiddle.net/098jrt7q/
use display:flexto the parent container .content ,I added the snippet below.I'm added the Snippet with 100% width (80+20) .
.content {
background: #eeeeee;
display:flex;
}
p {
display: inline-block;
width: 80%;
box-sizing: border-box;
}
img {
box-sizing: border-box;
width: 20%;
display: inline-block;
}
<div class="content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos sequi fugiat sint nihil quo unde deleniti ratione laudantium dolorum illo odio recusandae est, ab fugit incidunt, molestiae, inventore quam soluta mollitia dolorem! Quaerat
fuga, repellendus quo, at adipisci nihil voluptate molestias asperiores, dolorem maiores amet rerum debitis ullam! Molestias quasi doloribus tempora ratione ipsum similique accusamus debitis voluptatibus deserunt autem consequatur, ut dolor
repellendus at repudiandae? Dolorum modi blanditiis atque consequatur nesciunt repellat doloremque eius quisquam ea dolores, voluptate earum adipisci sit tempora voluptates aspernatur expedita dolorem reiciendis animi nisi, quas mollitia iusto
autem! Quisquam explicabo molestias dignissimos. Similique iste beatae sed? Mollitia commodi aperiam provident cum alias sapiente esse?</p>
<img src="https://source.unsplash.com/random/200x200" alt="">
</div>
They are side by side actually, with respect to the base line. If you open developer window and try to extend it, say to 2000 view port width..You will get to know... But it's the content of the paragraph <p>...</p> which keeps adjusting itself to accommodate its content. Over all w.r.t base line of their parent element they are side by side. Thank You :)
Any whitespace between inline-block elements takes up space.
Either:
remove the whitespace
.content {
background: #eeeeee;
}
p {
display: inline-block;
width: 80%;
}
img {
display: inline-block;
width: 20%;
}
<div class="content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos sequi fugiat sint nihil quo unde deleniti ratione laudantium dolorum illo odio recusandae est, ab fugit incidunt, molestiae, inventore quam soluta mollitia dolorem! Quaerat fuga,
repellendus quo, at adipisci nihil voluptate molestias asperiores, dolorem maiores amet rerum debitis ullam! Molestias quasi doloribus tempora ratione ipsum similique accusamus debitis voluptatibus deserunt autem consequatur, ut dolor repellendus
at repudiandae? Dolorum modi blanditiis atque consequatur nesciunt repellat doloremque eius quisquam ea dolores, voluptate earum adipisci sit tempora voluptates aspernatur expedita dolorem reiciendis animi nisi, quas mollitia iusto autem! Quisquam
explicabo molestias dignissimos. Similique iste beatae sed? Mollitia commodi aperiam provident cum alias sapiente esse?</p><img src="https://source.unsplash.com/random/200x200" alt="">
</div>
Or set font-size:0 on the parent element.
.content {
background: #eeeeee;
font-size: 0;
}
p {
display: inline-block;
width: 80%;
font-size: initial;
}
img {
display: inline-block;
width: 20%;
}
<div class="content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos sequi fugiat sint nihil quo unde deleniti ratione laudantium dolorum illo odio recusandae est, ab fugit incidunt, molestiae, inventore quam soluta mollitia dolorem! Quaerat fuga,
repellendus quo, at adipisci nihil voluptate molestias asperiores, dolorem maiores amet rerum debitis ullam! Molestias quasi doloribus tempora ratione ipsum similique accusamus debitis voluptatibus deserunt autem consequatur, ut dolor repellendus
at repudiandae? Dolorum modi blanditiis atque consequatur nesciunt repellat doloremque eius quisquam ea dolores, voluptate earum adipisci sit tempora voluptates aspernatur expedita dolorem reiciendis animi nisi, quas mollitia iusto autem! Quisquam
explicabo molestias dignissimos. Similique iste beatae sed? Mollitia commodi aperiam provident cum alias sapiente esse?</p>
<img src="https://source.unsplash.com/random/200x200" alt="">
</div>
I am designing a code documentation webpage having a similar design like stackoverflow. I am listing the details below:
fixed header
sticky sidebar.
The sidebar is an anchor menu linking to each section header.
The problem is that when I click on a link, the page jumps to the corresponding section, but the header is hidden behind the fixed header.
* {
margin: 0;
}
header {
position: fixed;
padding: 1em;
width: 100vw;
background-color: #ccc;
}
main {
padding-top: 6em;
width: 700px;
margin: auto;
}
section {
margin-bottom: 3em;
}
<header>
<h1>Title</h1>
</header>
<main>
Click me to visit - Eaque, voluptatum tempore.
<section>
<h2>Lorem, ipsum dolor.</h2>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore unde animi ratione inventore laudantium architecto nobis voluptates rem sed veritatis eaque eum id ab eligendi, ipsum earum a, fuga impedit consequuntur, iste officia voluptate commodi?
Asperiores illo repellendus earum laboriosam accusamus ex amet delectus quo voluptatibus, temporibus natus dolores praesentium dignissimos. Excepturi optio praesentium corrupti vitae ratione tenetur dolores voluptatem.</p>
</section>
<section>
<h2>Accusamus, saepe nam?</h2>
<br>
<p>Distinctio quo tenetur molestiae asperiores! Ratione tempore recusandae mollitia et maiores, veritatis in animi officiis consectetur, quo reprehenderit possimus porro maxime amet modi deserunt iste. Qui vitae quasi tenetur totam adipisci unde deleniti
commodi iure beatae recusandae esse, explicabo incidunt placeat. Nemo, dolore? Perferendis expedita omnis consectetur facilis enim voluptate ratione ad consequuntur minus, ea debitis, itaque quas fugit minima?</p>
</section>
<section>
<h2>Soluta, at officiis.</h2>
<br>
<p>Eum accusantium, rerum nulla, esse in quas consequuntur earum a culpa voluptates repellendus? In repellendus quasi quam, nesciunt, ullam adipisci autem reiciendis rem laborum eos repudiandae. Dolores quasi ducimus quis, iusto laborum nihil. Temporibus,
ratione iure sequi exercitationem voluptates id expedita ut quo repellat dolorum, officiis mollitia accusantium? Debitis, nobis. Quo exercitationem est impedit aliquam, a expedita saepe totam? Non.</p>
</section>
<section>
<h2>Mollitia, modi deleniti!</h2>
<br>
<p>Earum iusto nesciunt, rerum laboriosam velit, cumque perferendis accusamus laborum officia voluptates enim at quidem beatae. Asperiores soluta ullam aperiam suscipit tenetur officiis blanditiis cumque. Laboriosam ut itaque magni a voluptatibus, tenetur,
consequuntur temporibus rem obcaecati consectetur at laborum, hic perspiciatis aliquid voluptate excepturi minima voluptates eius iste. Possimus culpa sit expedita. Esse quos ipsum recusandae, unde laudantium repudiandae ipsa!</p>
</section>
<section>
<h2 id="link">Eaque, voluptatum tempore.</h2>
<br>
<p>Excepturi, fugit ipsam nesciunt neque harum a magnam adipisci eius velit. Dignissimos praesentium voluptatem laboriosam corporis minus soluta aperiam eius repellendus architecto pariatur vitae dolores ipsam consectetur eligendi optio fugit laborum
ratione aliquam provident tenetur explicabo qui, officiis veniam. Ipsum minima molestias quibusdam quos delectus voluptates. Et rerum quia modi? Corrupti corporis minus necessitatibus quod earum, cupiditate amet porro eveniet.</p>
</section>
</main>
How can I fix this so that the header is visible?
I am answering my own question since I found out a better solution to the problem.
So, to fix this, we can use the pseudo class :before.
.anchor:before {
display: block;
content: "";
height: 5em;
width: 0;
position: relative;
margin-top: -5em;
}
Why shouldn't we use padding?
Adding a padding to the top will solve the problem for some cases, but it may add too much white space. Whereas, using :before, we don't need to think about it.
The answer above is better. Use :Before.
Old answer:
Put this above your header:
<h1><a class="anchor" name="anchor">Bar</a></h1>
with these CSS:
.anchor { padding-top: $your amount of padding$ px; }
I am building my very first website.The slide-in and slide-down animations were working properly until I set the navigation bar (nav-bar) position fixed then the animation got ruined I fixed the slide down animation of .welcome-text but could fix the slide-in animation of #intro.
I would like that slide-in animation slides-in without distorting the other pages - here is the code below;
//HTML
'''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Deborah Palm Tree</title>
<link rel="stylesheet" href="profile.css">
<link rel="stylesheet" href="work.css">
<link rel="stylesheet" href="about.css">
</head>
<section class="Home" id="#Home">
<nav class="nav-bar" id="#nav-bar">
<ul>
<li>Home </li>
<li>Work</li>
<li>About </li>
</ul>
</nav>
<body>
<section id="#Home">
<h1 class="welcome-text"> Welcome to my page! </h1>
<div id="intro" class="page-intro">
<a name="Home">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A modi veniam
repellendus nesciunt
nemoquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
mollitia placeat
perspiciatis
expedita! Explicabo hic expedita soluta eos ullam. Incidunt vitae
laboriosam temporibus iusto
iste maiores dolorum soluta, ipsa minus optio repudiandae adipisci aut
deserunt vel atque
deleniti facere, sint, quas earum a. Ipsum neque, explicabo fuga, expedita
error sequi ratione
atque et fugit adipisci harum ad dolorum! Deleniti similique, reiciendis
ipsam blanditiis a
neque, iste obcaecati, soluta eveniet nostrum praesentium porro culpa
asperiores quisquam unde
sapiente ad dolorum architecto voluptatum? Officia nihil saepe iste
excepturi distinctio
exercitationem veniam, voluptates laudantium repellendus, eligendi omnis
molestiae impedit
necessitatibus incidunt consectetur debitis quisquam assumenda deleniti
quam molestias nemo.
Perspiciatis aperiam sit fugit provident mollitia. Nostrum, fuga quaerat praesentium excepturi
iste impedit consectetur architecto odio blanditiis ducimus aliquid sit! Doloremque, obcaecati
laudantium, quia alias repellendus quos suscipit, modi corporis quidem corrupti incidunt
consequatur laborum necessitatibus eaque perspiciatis quod repudiandae qui! Deserunt, quo error
dolor provident ipsum nostrum dolore nihil veritatis ad quibusdam ducimus suscipit doloremque
neque incidunt nisi temporibus. Atque ipsa labore magni, exercitationem, laudantium nostrum
Officiis deserunt qu quaera dicta eaque vitae, nulla doloribus minima praesentium aliquid
nesciunt. Cumque rem
aspernatur id repellat s placeat corrupti eum eos quidem aliquid. Hic numquam quos sequi est
dignissimos magnam
voluptatibus maiores excepturi ratione reiciendis quia fugiat ipsa voluptatem nobis accusamus
sint asperiores neque,
animi nemo eminus sapiente! Culpa temporibus illum ullam rem quae aspernatur doloribus ut
voluptatum nihil
quo laborum, a provident. Iste ratione inventore saepe architecto recusandae.
</p>
</a>
EXPLORE
</div>
</section>
<section class="Work" id="#Work">
<h2 class="h2-Work"> WORK </h2>
<a name="Work">
<p class="p-Work">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
cupiditate aliquid tempore, suipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.
debitis numquam cum odio dicta ducimus pariatur ullam! Nesciunt facere reprehenderit cupiditate aperiam
repudiandae autem blanditiis magni ea, odit molestiae quo ad vero ratione cumque beatae voluptatem porro
ipsum, ducimus dignissimos eaque quibusdam quod. Velit facilis ipsum, harum amet quaerat perferendis
suscipit officiis recusandae voluptatibus cum numquam quisquam alias? Vero deserunt commodi ea dolores. Fuga
debitis inventore temporibus harum porro! Atque maxime iste hic aperiam sunt reprehenderit, dignissimos
dolorem perferendis possimus exercitationem iure commodi modi repellendus at esse labore magnam quia
quibusdam maiores, quaerat nesciunt nobis! Eius saepe, quo itaque rem quia quae sequi tempora, ratione
eveniet, possimus sunt! Tempore nemo, quia reprehenderit dolorum totam quae? Magnam non ratione esse,
laudantium ducimus ullam officiis! In placeat ut libero rem consectetur dolorem ullam consequatur suscipit
amet sunt voluptas, harum dolorum quaerat similique, perspiciatis, ratione officia id obcaecati ipsa
perferendis repellendus. Explicabo animi repellat a vel in, doloremque eum officiis reiciendis ipsam quis
deleniti assumenda quibusdam fuga recusandae impedit asperiores eos cum aperiam labore vero molestiae? Odio
aut laboriosam perspiciatis aspernatur blanditiis excepturi provident consectetur beatae.
perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias voluptate est iste
reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium,
suscipit Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam ducimus velit quisquam
provident. Saepe, dolores suscipit harum adipisci dicta obcaecati officiis voluptatibus, cupiditate iure
nostrum, nemo voluptatem facere cum. Exercitationem ipsam ab est et porro, debitis, sapiente nam recusandae,
illo delectus ea. Consequuntur provident exercitationem dolore numquam repellendus nam voluptas at modi
repellat non dolores nemo laborum molestiae aliquid eaque, similique id voluptate. Omnis unde est saepe
asperiores, delectus ipsum dolore. Dicta repellat odit, debitis temporibus incidunt omnis saepe ipsam
consequuntur obcaecati, sit laudantium ratione. Sapiente, reiciendis cumque, exercitationem voluptates,
alias fuga enim consequuntur dolorem consequatur repudiandae modi? Quibusdam.
temporibus vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
</p>
</a>
</section>
<section class="About" id="#About">
<h3 class="h3-About"> ABOUT </h3>
<a name="About">
<p class="p-About">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
cupiditate aliquid tempore, suscipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.
Soluta Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repudiandae minima architecto quibusdam
dolore optio nihil assumenda, laboriosam facilis repellat totam dolorem impedit mollitia at nisi a ipsum
aliquam explicabo. perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias
voluptate est iste
reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium, Lorem
ipsum dolor sit amet consectetur, adipisicing elit. Minima aliquam eligendi culpa, fugit non voluptatem quia
aspernatur optio assumenda dignissimos excepturi, expedita cum voluptates error omnis earum praesentium quas
quidem ipsam doloribus. Beatae, quos. Quam, maxime itaque tenetur repudiandae modi libero nihil nemo qui
temporibus sed impedit minima doloremque earum excepturi accusamus culpa vel sit natus dolor velit, hic,
sapiente ea ut quae. In placeat velit excepturi iste temporibus, illum dignissimos optio repellat totam
asperiores animi voluptatem illo voluptas, odit et molestias pariatur quas! Impedit aut odio similique
vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
</p>
</a>
</section>
<section class="footer" id="#footer">
<footer>
© Website designed by Deborah Palm Tree.
</footer>
</section>
</body>
</html> '''
//CSS -The HTML has 3 nav-bar items I set the nav-bar position to fixed and its top to
zero to ensure the nav-bar is static as I scroll down the page this affected the slide-
animation of the Home
''' * {
margin: 0;
padding: 0;
}
body {
background-color: black;
text-align: center;
}
.page-intro {
max-width: 960px;
margin: auto;
padding: 0 30px;
}
.welcome-text {
height: 80px;
}
nav.nav-bar {
position: fixed;
top: 0;
background-color: darkolivegreen;
min-width: 100%;
height: 8vh;
}
nav li {
display: inline-block;
margin-right: 5%;
}
nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
nav li a {
text-decoration: none;
color: whitesmoke;
}
h1,
.page-intro {
color: whitesmoke;
}
h1.welcome-text {
font-size: 50px;
line-height: 1.3;
animation: slide-down 3s forwards;
}
.h2-Work,.h3-About{
font-size: 25px;
color: antiquewhite;
text-align: center;
padding: 30px 30px 0px 30px;
}
#keyframes slide-down {
0% {
margin-top: -20px;
}
100% {
margin-top: 80px;
}
}
#intro {
animation: slide-in 3s forwards;
}
#keyframes slide-in {
0% {
margin-left: -50%;
}
100% {
margin: 0;
}
}
.btn {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 1rem 2rem;
border: #fff 1px solid;
margin-top: 40px;
opacity: 0;
animation: btn 3s 3s forwards;
transition: transform 1s;
}
.btn:hover {
transform: rotateY(180deg);
}
#keyframes btn {
0% {
bottom: 10%;
opacity: 0;
}
100% {
bottom: 5%;
opacity: 1;
}
}
.p-Work {
color: antiquewhite;
text-align: center;
}
.p-About {
color: antiquewhite;
text-align: center;
}
.footer {
color: antiquewhite;
background-color: cadetblue;
min-width: 100%;
}'''
#intro {
animation: slide-in 3s forwards;
transform: translate(-50%);
position: relative;
left: 50%;
}
position: relative;
This is allowing the element to retain its size in-line with the parent element i.e. it is relative to the box modle of its perant
left: 50%;
This is centering the possition of the element to the middle but
transform: translate(-50%);
By default, all the elements have their center point in the top left of the page and this means that you need to shift that to the center, which is where the transform translate comes into play
Hope this helps
Based on the above all you need is to keep the changes made in my answer above as well as adding the navbar to being fixed:
nav.nav-bar {
position: fixed; (<<<< the nav bar will stay at the top of the page)
top: 0;
background-color: darkolivegreen;
min-width: 100%;
height: 8vh;
z-index: 5; (<<<<<< the content goes under the nav)
}
Z-index is the position of elements, if a z-index is higher than another elements then it will apear infront the the element (this only works for possitioned elements - so it will work here as the possition is set to fixed)
More info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
For point 3) intro text should slide in from left side -
This is currently doing so correctly from the code I can see and have edited:
#intro {
animation: slide-in 3s forwards;
transform: translate(-50%);
position: relative;
left: 50%;
}
If there is an issue here let me know :)
I'm trying to put a fixed sidebar and then the main container side by side.
So the sidebar stays fixed like a side navigation bar, and the container can scroll up and down. kind of like the jsfiddle page. But with a scrolling content. There shouldn't be any gap between those two parent divs.
I tried this so far. But something is off. There is a huge gap between the sidebar and the content.
body {
max-width: 90%;
margin: 0 auto;
background-color: whitesmoke;
}
.sidenavbar {
/*max-width: 30%;*/
min-width: 19%;
min-height: 100%;
/*width: 200px;*/
position: fixed;
left: 0;
top: 0;
z-index: 1;
background-color: #fff;
color: #000;
}
.container {
float: right;
width: 71%;
overflow: auto;
}
.content {
margin: 0 auto;
/*padding: 2em 3em;*/
overflow: auto;
overflow-x: hidden;
}
<div class="sidenavbar">
<div class="brand">
<img id="logo" src="img.png" width="150px" alt="#">
</div>
</div>
<div class="container">
<div class="content">
<img src="img.png" alt="#">
<h1>Generated Content</h1>
<p>This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. </p>
<h2>Hello!</h2>
<p>
This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph.
</p>
</div>
</div>
You have done everything perfect, but using a width: 71% for your container is what you messed up. You cannot have 20% Fixed Sidebar. When you use % values, then it becomes fluid. I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
I have changed your code to make it better:
body {
max-width: 90%;
margin: 0 auto;
background-color: whitesmoke;
}
.sidenavbar {
width: 200px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
background-color: #fff;
color: #000;
}
.container {
padding-left: 200px;
}
.content {
margin: 0 auto;
padding: 15px;
}
<div class="sidenavbar">
<div class="brand">
<img id="logo" src="//placehold.it/150x75?text=Sidebar" width="150" alt="Sidebar" />
</div>
</div>
<div class="container">
<div class="content">
<img id="logo" src="//placehold.it/150x75?text=Main+Logo" width="150" alt="Logo" />
<h1>Generated Content</h1>
<p>This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. </p>
<h2>Hello!</h2>
<p>
This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph. This a paragraph.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus id vitae quidem eos aperiam quae facere iste illum doloremque, in temporibus earum nostrum saepe eius sed molestiae nam ad voluptatibus!</p>
<p>Tempora maiores eaque quis aperiam minus dignissimos quae, labore ab impedit quidem aliquid, voluptatum consequatur magnam ratione fugit accusamus cumque voluptates! Magni quo natus atque maxime debitis qui nam accusantium.</p>
<p>Corrupti temporibus iusto sequi, tenetur voluptatem, assumenda! Esse nesciunt, laborum! Quod ducimus quaerat praesentium in assumenda dignissimos harum, suscipit debitis at. Quasi laborum, ducimus earum quis dolor natus, obcaecati in.</p>
<p>Vel veniam deleniti quos ab in, rem possimus labore sed expedita animi dolores id totam pariatur delectus beatae, consequatur maiores distinctio porro officiis numquam velit, sequi quia ea quasi? Sapiente.</p>
<p>Quibusdam similique ipsa aut eligendi, rem amet assumenda officiis delectus mollitia dolorem cumque sit sint, consequatur unde cupiditate optio dolor ad, vitae ullam quo. Dolorum aperiam est explicabo aliquid totam?</p>
<p>Amet ratione laboriosam iste dolore expedita magni, reprehenderit sed est, tempora ex asperiores ad harum. Mollitia distinctio dolor nostrum omnis dignissimos voluptate debitis eveniet quasi, in molestiae enim accusantium quis.</p>
<p>Repellendus incidunt doloremque aspernatur ea, distinctio animi. Odit porro, ratione deserunt qui possimus esse! Quas nisi ipsa necessitatibus odit ipsum minima voluptate quam praesentium numquam natus. Accusamus adipisci quidem ad?</p>
<p>Placeat magnam, in amet tempora aperiam perspiciatis sit culpa eius ullam inventore nam animi eveniet aspernatur, cupiditate sint minima quos debitis quaerat quasi, quas, sed similique. Autem totam, tempora numquam.</p>
<p>Optio accusantium et, quas deleniti, itaque voluptatum repudiandae ipsam, sequi esse, veniam reprehenderit? Adipisci laborum libero culpa rem, eius eaque, unde temporibus, corrupti numquam ipsum est eum sed iusto quasi.</p>
<p>Cumque nihil illum numquam hic mollitia vel ullam iure est ad, praesentium aspernatur ipsum reprehenderit cum labore alias culpa, impedit. Tenetur quibusdam incidunt voluptate eius voluptates repellendus voluptas pariatur autem.</p>
<p>Quae ex natus inventore voluptatum minus porro ullam, assumenda laboriosam. Excepturi dignissimos et quos quam maiores provident error earum quisquam est, rem ex perferendis eos laborum saepe! Quam, pariatur, cupiditate!</p>
<p>Quidem officiis explicabo repellat deserunt vero sit eius, eos nulla laboriosam libero pariatur quisquam iste soluta dicta quasi incidunt enim quae voluptatibus maiores vitae, odio fuga amet. Veritatis, sed, officia.</p>
<p>Repudiandae ducimus debitis ab sed expedita, ad autem aperiam asperiores consequatur perferendis. Nihil ipsum sint officia placeat neque necessitatibus recusandae, error. Nesciunt amet ea nostrum reiciendis, velit fugit ex fuga!</p>
<p>Illo, tempora magnam rem minima nulla veritatis reiciendis ipsum commodi dicta ab incidunt, rerum voluptatem necessitatibus autem debitis dolores vel, ratione sed perferendis impedit ex! Nam corporis, assumenda possimus culpa.</p>
<p>Quam, quo, quis! Dolorum unde tempore eaque optio quos rem saepe distinctio eius maiores nesciunt obcaecati totam, repellat consectetur tenetur earum illo reprehenderit accusantium quisquam. Voluptas eaque perspiciatis in voluptatem?</p>
</div>
</div>
Please kindly run the above snippet and see in here as well as in full screen. The sidebar will be fixed and you have fluid scrollable main content.
Read more about this approach in my detailed article: Science behind Fixed-Fluid Layouts.
I created a container inside another container that has position:absolute and top:100%. This container is used to be some kind of fade-out-container, so it actually has no real content.
Now when this containers height exceeds the browser windows height, a scrollbar appears. And this is exactly what should not happen.
Instead I thought I could apply overflow:hidden on body or the parent container, but either too much gets cut off or the fade-out-container itself becomes invisible.
Please have a look at my fiddle and tell me what I'm missing. Thanks!
HTML
<header>
<h1>Demo</h1>
</header>
<footer>
<p>
The orange container wraps the blue one.<br/>The blue containers' height is meant to be cut off of the browser window meaning it's overflow should get hidden if the browser windows' height is insufficient.
</p>
<p>position: relative;<p>
<div class="append gradient">
<p>position: absolute;<br/>
top: 100%;<br/>
left: 0;<br/>
width: 100%;<br/>
height: 100%;</p>
</div>
</footer>
...
CSS
body {background: 333;}
header, footer, .append {
font-family: consolas, console, courier, arial, helvetica;
margin: 0 auto;
color: #FFF;
padding: 15px 30px;
}
header {
background: #666;
}
footer {
background: #F86;
position: relative;
height: 300px;
/*overflow: hidden;*/
}
.append {
background: #66F;
position: absolute;
top: 100%;
width: 100%;
height: 500px;
left: 0;
}
EDIT: updated fiddle, added inline code, added images
When you give top: 100% with a position: absolute, then you are actually sending it fully to the next page. I guess you are trying to make a modal-window, then you need to set it as:
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
The above code will over everything. The overflow: hidden is not applicable here, but when you are planning to show the modal window, or the overlay, it is best to use overflow: hidden to the <body>, so that the users will not be able to scroll and you can find the modal window.
Explaining the whole concept I said using a snippet here. Click the links to invoke the modal window. Click the opened modal window to hide it back. Scroll and see. Play around with it:
$(function () {
$("body > p").append(' Open Modal');
$("p a").click(function () {
$("body").addClass("modal-open");
return false;
});
$(".mask").click(function () {
$("body").removeClass("modal-open");
});
});
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background: rgba(0,0,0,0.5);
z-index: 999;
color: #fff;
font-size: 1.5em;
text-align: center;
}
.mask p:first-child {
padding-top: 5em;
}
.modal-open {
overflow: hidden;
}
.modal-open .mask {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mask">
<p>Click the links to invoke the modal window.</p>
<p>Click the opened modal window to hide it back.</p>
<p>Scroll and see. Play around with it</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda vitae temporibus corporis, quisquam, doloremque excepturi itaque laborum ratione sequi aliquid atque rerum rem minima, aperiam laboriosam blanditiis alias ex quas?</p>
<p>Quam dolor, perspiciatis! Perspiciatis voluptatibus magnam ad hic sint, officia voluptates aut labore, excepturi quasi sed sit modi amet temporibus exercitationem laudantium veniam cumque omnis quo! Esse, quas! Harum, iure!</p>
<p>Illo optio alias amet ex consequuntur est autem itaque reprehenderit odit, laboriosam saepe ipsa harum eligendi sit cumque modi cum perspiciatis! Dolorum, alias nostrum asperiores velit atque perferendis voluptatibus. Maiores!</p>
<p>Cumque perspiciatis laudantium sequi itaque eos facilis illum repellat necessitatibus sunt recusandae rem, tempore blanditiis consectetur distinctio nostrum enim sit corporis non odio deleniti architecto. Corporis, nam assumenda. Quibusdam, perspiciatis!</p>
<p>Illum, quasi nisi animi. Expedita recusandae nam maxime architecto, illo a? Aspernatur numquam eveniet quisquam, inventore fugit amet voluptatem porro odio corporis obcaecati nostrum earum aliquam recusandae, sint necessitatibus rem.</p>
<p>Id praesentium vitae tenetur harum voluptate error adipisci dignissimos vero voluptatibus numquam quibusdam, nemo molestias alias aliquam, est, esse at fugiat quasi ducimus ratione! Inventore, eaque repudiandae sed magnam incidunt!</p>
<p>Aliquid in, veritatis ut! Veritatis, voluptatibus? Fugiat iusto officia repellat quasi dolore eum odio vitae inventore error debitis, doloribus facilis, itaque! Perspiciatis iste, incidunt hic non qui voluptate rem quidem?</p>
<p>Explicabo laudantium quidem, ab aperiam autem tenetur quae voluptatem quam, mollitia recusandae sapiente id, praesentium quasi soluta tempora dolorum, maiores velit. Porro unde doloribus iste, nihil ipsa, pariatur molestias aliquam.</p>
<p>Aut excepturi vitae dicta, quos distinctio, nulla, nostrum architecto, atque veritatis perspiciatis voluptates odio. Similique nobis sed natus illo esse, quod quas ex tenetur dolore deserunt optio voluptate numquam quo.</p>
<p>Repudiandae inventore consequatur nisi ad ut voluptas pariatur ducimus consequuntur, exercitationem tenetur ipsam nesciunt beatae nostrum soluta similique excepturi perspiciatis consectetur illum veniam aut hic, neque eveniet. Nesciunt quas, placeat?</p>
<p>Unde nam, aut placeat. Voluptas, consequatur, quis. Perferendis illum ratione in voluptate consectetur molestias nam hic, reprehenderit similique distinctio. Repellendus veritatis excepturi hic dicta fuga mollitia! Culpa dolores doloribus, ratione.</p>
<p>Vero cupiditate quaerat sit non veritatis harum nesciunt eos suscipit tempore dolorem porro saepe a, iusto vitae, voluptatum debitis consectetur voluptas, corporis. Sequi, sint odio eligendi delectus culpa dignissimos, obcaecati?</p>
<p>Ipsam sequi facilis magnam ad officiis quae, nobis iusto, commodi culpa optio a facere numquam placeat perspiciatis saepe maxime mollitia voluptatem sunt ipsa? Sequi ipsam, nostrum blanditiis dicta repudiandae iste!</p>
<p>Facilis tenetur officia quo delectus eius quam vel minus quas nesciunt ipsa perferendis, explicabo quasi itaque, rem vero accusamus debitis quis pariatur blanditiis illo nostrum eum! Molestiae fuga eius, illum.</p>
<p>Accusantium, repellendus soluta modi animi cumque error, nemo doloremque. Commodi voluptates distinctio nesciunt animi a, odio assumenda exercitationem amet reprehenderit libero expedita fugit. Id minus, corporis quibusdam cupiditate aut harum!</p>