This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
Well, now I've this problem, I want to adjust just the margin on the "c2" but when I set it to X, it changes the "c1" div margin :S
Here's the code I'm using:
<header>
<div class="jumbotron">
<center><h1>Bienvenidos a JVasconcelos.me</h1></center>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 col-centered">
<div class="c1">
<div class="c2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
</p>
</div>
</div>
</div>
</div>
</div>
CSS
div.c1 { height: 100vh; background: #417ba1; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 0px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }
Ah. You're looking for
.c1 {
overflow: auto; // or hidden or overlay
}
This behavior is due to the collapsing margins part of the box model spec. Putting overflow: auto|hidden|overlay on the parent will establish a new block formatting context and stop the margins from collapsing.
This is because the border of the c1 and c2 are collapsing. You have to hide the overflow (with overflow: hidden or any overflow different that default, which is visible) of the container to avoid that the c1 also get the margin of c2.
div.c1 { height: 100vh; background: #417ba1; overflow: hidden; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 20px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }
<header>
<div class="jumbotron">
<center><h1>Bienvenidos a JVasconcelos.me</h1></center>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 col-centered">
<div class="c1">
<div class="c2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
</p>
</div>
</div>
</div>
</div>
</div>
I assume you mean when you change the margin-top on the div.c2 your div.c1 also shifts down. This is due to the default definition of a div+div construct.
To achieve what you want you will need to create the following extra css definition on your div.c1:
display: inline-block;
Have a look at this codepen: http://codepen.io/anon/pen/beNjbW
Difference of or greater margin of c1 or c2 will be rendered due to collapsible margins.
In this case your total distance will be 0 (they cancel each other):
div.c1 {
margin-top: -30px;
}
div.c2 {
margin-top: 30px;
}
In this case your distance will be 10px from the top:
div.c1 {
margin-top: -30px;
}
div.c2 {
margin-top: 40px;
}
One of top margins can be omitted in this case. You can control the distance to header by adjusting margin-top of either one
codePen example
Related
I have a button in a sidebar div which I want to position so half of it sticks out of the container. The problem is because the sidebar needs its own scrollbar this makes the button get cut off. Example here: http://jsfiddle.net/z5dy7t4x/19/
Why does the button get cut off when adding overflow-y: scroll; to the container?
Is it possible to show the button without modifying the HTML?
Couldn't figure out a CSS only solution. Solved it by adding an inner container and putting the scroll on that. Working example: http://jsfiddle.net/37ow2pqy/2/
<div class="sidebar">
<button class="close">
CLOSE
</button>
<div class="sidebar-content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>
.sidebar{
width: 300px;
border: 1px solid #000;
position: absolute;
right: 0;
}
.close {
position: absolute;
top: 20px;
left: -25px;
}
.sidebar-content {
overflow-y: scroll;
height: 300px;
}
You added position absolute for the button, that's why your button is hidden
#parent{
position: absolute;
right: 0;
}
#close {
background-color: red;
color: white;
position: absolute;
left: -50px;
}
#child{
border: solid 1px black;
width: 200px;
height: 200px;
overflow-y: scroll;
margin-left: auto;
margin-right: auto;
}
<div id=parent>
<button id=close>
abololute child
</button>
<div id=child>
This is the child
</div>
</div>
Error to be addressed first:
In your CSS, you have position: relative;, and also position: absolute;, the latter being the one I believe you are going for, you need to remove the position: relative;.
Your First Question
Why does the button get cut off when adding overflow-y: scroll; to the container?
Because, by default, overflow is set to overflow: visible;, so you are changing that (overflow-y of course, being part of overflow).
Your Second Question
Is it possible to show the button without modifying the HTML?
Well, if you want the button halfway outside the <div>'s box, I would guess that you don't want the button to scroll with the content. If this is the case, then you will need to put the <button>...</button> outside of the <div> that the content (Lorem ipsum, etc.) is in (and change its positioning).
(Another way is to just use position: fixed; instead, but I seriously doubt that that's what you want)
Here it is:
.box{
width: 300px;
border: 1px solid Black;
position: absolute;
right: 0;
}
#close {
position: absolute;
top: 20px;
left: -31px;
}
.content {
overflow-y: scroll;
height: 250px;
}
<div class="box">
<button id="close">
CLOSE
</button>
<div class="content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim nulla incidunt illo, at consequuntur eaque distinctio, dolorem, nemo quam ipsum accusantium vitae! Nam rem, dolor quod quas nobis, dolorem veniam molestias laboriosam blanditiis autem sequi tenetur, dolore distinctio beatae voluptates doloremque excepturi officia ratione quisquam. Eveniet aperiam rerum iusto, odit excepturi saepe, ullam et quo sint, delectus vel velit repellat quibusdam aut earum architecto corrupti? Dignissimos ullam sit autem numquam nihil adipisci dicta non officiis, tenetur excepturi hic ex saepe corporis animi asperiores nesciunt quo, voluptate libero sapiente. Totam, modi quaerat! Exercitationem fuga autem magnam id repudiandae doloremque voluptatem?
</div>
</div>
I'm making a parallax website and at the top of the page I want the left to be text and the right to be an image. At this moment in time the image only shows up under the text div.
.section {
width: 100%;
text-align: center;
padding: 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<img src="resources/img/scene1image.png" alt="scene1image.png">
</section>
If you want your text to be on the left and image on the right, you need to create one div containing the text and one div containing the image. Then you can put both of it into 1 div to contain both of them (nested divs) and set inline-block to both the inner divs.
You can then set both the inner divs to 50% , so they make up 100% of the width. But since you have a padding (left and right) of 80px, use calc(50%-80px) so that you create a width of 50% - 8px.
Try this:
* {
padding: 0;
margin: 0;
}
.section {
width: 100%;
text-align: center;
padding: 50px 0 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img {
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img img {
width: 100%;
height: 80vh;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<div class="sub-section-img">
<img src="http://lorempixel.com/200/200/" alt="scene1image.png">
</div>
</section>
Edit:
1) Added a new CSS rule with vh. Now, you can set the image height to the exact height. You got to do trial and error to suit your exact height desired, just increase / decrease the value in height: 80vh.
2) Removed the padding on the right since you want the image to the edge. Changed the values in .section css.
3) If you want absolutely no gap to right of the image, then add the CSS reset (removal of the default padding and margin).
* {
padding: 0;
margin: 0;
}
Making a Reactjs app. Referring to the code, I would like to make the height of the colorTab div, equal and responsive to that of the content div. The height of content must be dynamic given that I would like it to be defined by the amount of text in tile + description, which is variable, and the width of the window.
Currently, when I omit min-height from colorTab's CSS and simply have height: 100%; defining colorTab's height, colorTab disappears. Adding the min-height gives it that height but then it becomes unresponsive to the height of content which is the goal. How do I solve this issue?
JSX:
<div className="wrapper">
<div className="colorTab" style={color}>
</div>
<div className="content">
<tr>
<td className="title">
<a href={link}>{title}</a>
</td>
</tr>
<tr>
<td className="description">
{description}
</td>
</tr>
</div>
</div>
CSS:
.wrapper {
min-height: 48px;
overflow: hidden;
}
.colorTab {
float: left;
position: relative;
width: 5px;
min-height: 48px;
height: 100%;
border-radius: 5px;
margin-left: 15px;
}
.title {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.description {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
Flexbox will offer the functionality you need.
Put display: flex on your container class. And flex: 1 on your content div. No matter how much content you place in the content div the colorTab div will match its height.
Example in pure HTML/CSS (no React):
.wrapper {
overflow: hidden;
display: flex;
}
.colorTab {
position: relative;
width: 5px;
border-radius: 5px;
background: red;
}
.content {
flex: 1;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Now, I would absolutely recommend the flexbox mentioned in the other answer but...
but for some other outdated browsers which do not support it (cough
cough looking at you, grandpa, using that same old version of IE)... it
might be good idea to provide extra version support.
So, for answer's completion sake:
The other option is to utilize the tables.
.wrapper {
display: table;
}
.description {
display: table-cell;
}
.colorTab {
display: table-cell;
width: 5px;
border-radius: 5px;
background: red;
}
// not necessary, but for esthetic reasons
.content {
position: relative;
left: 10px;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Using HTML and CSS, I'm attempting to achieve a seemingly simply layout with three components : a stickied header, a stickied footer, and a middle area that is 100% of whatever space is left in the browser window. I'd also like my entire site to be centered horizontally.
I've searched for and applied various answers from this forum, but nothing seems to work once I start to apply new characteristics to the page.
I'd like to also absolute center what will be a horizontal table in the above-mentioned content area, as well as position elements in the header and footer -- But I can't seem to get the basics down. What am I doing wrong?
#site {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
#content {
width: 1024px;
height: 100%;
vertical-align: middle;
background-color: red;
}
#footer {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.item {
display: table-cell;
}
.copy {
font-size: 12pt;
font-family: Arial;
display: inline-block;
vertical-align: middle;
}
.l1nk {
display: inline-block;
vertical-align: middle;
}
.l2nk {
display: inline-block;
vertical-align: middle;
}
<div id="site">
<div id="header">
<img class="logo" src="Images/logo.png" alt="logo" height="60" width="195" />
</div>
<div id="content">
<img class="item" src="Images/item.png" alt="logo" height="150" width="150" />
</div>
<div id="footer">
<div class="copy">xoxo © xoxo </div>
<div class="l1nk">
<img src="Images/insta100.png" alt="instagram" height="25" width="25" />
</div>
<div class="l2nk">
<img src="Images/twttr100.png" alt="twitter" height="25" width="25" />
</div>
</div>
I'm new to this forum, and a novice programmer, so I'll roll with the punches. But I'd like a stronger foundation so that I can move forward with my code. Thanks so much
Personal I would use flexbox to accomplish this but an easy way to do it as well with out having to learn flexbox looks a little something like this
https://jsfiddle.net/kriscoulson/2fqu03b2/
this one has content in the content block
https://jsfiddle.net/kriscoulson/2fqu03b2/1/
HTML
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
position: relative;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
height: calc(100% - 240px);
overflow: auto;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
position: absolute;
bottom: 0;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
</div>
You can use the calc function in css to help determine the height since you know that the header is 120px and the footer is 120px we know that is 240px total that the content will not take up.
// EDIT
This is with the use of flexbox if you are trying to learn flexbox to do it
https://jsfiddle.net/kriscoulson/2fqu03b2/2/
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
overflow: auto;
flex: 1;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
justify-content: flex-end;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus fugit atque magni quis at, voluptate consectetur voluptates laboriosam distinctio beatae quos sunt architecto? Quis nihil optio incidunt a, ad iure!</div>
<div>Obcaecati expedita maiores ab. Tempora alias culpa, error quasi, quia delectus. Ratione, sapiente, at repellendus aspernatur debitis nesciunt eum fuga quibusdam in, suscipit omnis minima vero error perspiciatis, eaque corrupti?</div>
<div>Ullam praesentium doloremque inventore! Similique dolor delectus, consequatur at doloremque quibusdam sed ullam officiis molestias dignissimos doloribus in obcaecati explicabo ipsum ducimus et error, atque. Itaque consequatur perspiciatis dignissimos eligendi!</div>
<div>Maxime natus asperiores autem nobis in dicta necessitatibus consequuntur et expedita architecto molestias veniam, voluptate adipisci corporis qui sed modi sunt saepe sapiente vel voluptatem placeat facere nihil repudiandae. Cumque?</div>
<div>Rerum quod asperiores reprehenderit itaque sunt repellat natus nostrum, modi exercitationem impedit odit adipisci voluptates, facilis eligendi eum ex accusamus tenetur omnis fugiat iste provident ipsa earum. Optio, culpa, repudiandae.</div>
<div>Quo amet ex obcaecati natus, nesciunt accusamus eius laudantium magni id. Dolorum mollitia ab nam saepe excepturi, sapiente quisquam ducimus, perspiciatis obcaecati modi qui, sit laborum vero vitae cumque sequi!</div>
<div>Repudiandae laborum ducimus totam! Neque aliquam alias necessitatibus praesentium numquam fuga totam inventore quis ab tempore aliquid dolore, similique voluptatem ipsam nisi earum ea quidem dolor, optio quibusdam? Sed, corrupti.</div>
<div>Culpa a quos, explicabo adipisci pariatur impedit obcaecati consectetur aut maxime architecto eos facere ex voluptate provident iste blanditiis sed laboriosam magni aspernatur esse corrupti quasi quod! Officiis corrupti, voluptatibus.</div>
<div>Optio sunt ipsam, et esse libero consequatur maiores illum nihil ad asperiores sed rem soluta sapiente quia nobis voluptatem, velit pariatur sint non aperiam, nostrum. Dolorum officiis, amet tenetur odio?</div>
<div>Culpa dicta in soluta, cum, sapiente natus atque, vitae, laudantium ipsam dolorem obcaecati ad quibusdam. Accusantium consequatur sit odit minima, omnis nihil unde pariatur. Distinctio doloremque earum, deserunt doloribus culpa.</div>
<div>Doloribus nobis, minima animi. Rerum magni hic dicta iste, laborum similique, sed corrupti accusamus ad quam assumenda ab consectetur suscipit nostrum. Sapiente aliquid, voluptatibus eius optio modi tenetur, unde iure.</div>
<div>Impedit, dicta, atque nesciunt quos laboriosam facilis, nihil assumenda officiis omnis reiciendis iste quisquam asperiores eveniet ad corrupti error voluptatum consectetur velit neque. Minima distinctio, corporis expedita eius sapiente cumque?</div>
<div>Repellendus tempora rem corporis ullam soluta est veritatis, itaque! Quo fugit dicta minus obcaecati minima repellendus numquam, ipsam non eligendi porro exercitationem nesciunt vel similique nemo necessitatibus dolorem dolorum id?</div>
<div>Ad obcaecati voluptas nobis veniam explicabo ut atque eaque itaque, magni sed, veritatis totam ea, repellendus in quia iure soluta suscipit aliquam? Adipisci fugit ipsum delectus nisi vitae, veritatis ducimus.</div>
<div>Dolorem inventore facere doloremque quod excepturi. Quo nostrum non quaerat pariatur. Pariatur necessitatibus deleniti ea dolores ut sequi saepe sint nulla. Minima harum explicabo voluptate sunt, adipisci quisquam delectus distinctio.</div>
<div>Neque, numquam libero tempora harum accusantium tempore veniam reprehenderit ea ratione, delectus alias molestias reiciendis eos cumque labore nulla quasi aliquam qui eaque accusamus dolor iste sed veritatis? Maxime, cum!</div>
<div>Reiciendis veritatis recusandae aliquid eos laudantium culpa, consectetur aspernatur voluptate expedita? Explicabo, quisquam! Alias mollitia velit nesciunt, tempore ipsum distinctio, iusto, quidem dolor odio consequatur, ipsa iste. Repellendus veritatis, quas?</div>
<div>Quos omnis repudiandae, corrupti consequuntur culpa. Magnam aperiam, ad accusantium consequuntur. Nemo iure ab temporibus molestias et nesciunt eum excepturi magni, ipsum quae, molestiae eaque reprehenderit voluptatem! Fugit, praesentium, beatae!</div>
<div>Sit officia, quasi veritatis sint inventore odit consequatur iusto et ex sequi nihil quisquam praesentium, quos neque eum. Atque recusandae dolorum illum iusto consectetur dolores maiores blanditiis! Libero, explicabo officiis?</div>
<div>Ratione repudiandae ad officia quas nemo eos molestias quasi, perferendis facere, aspernatur. Aliquid nobis est dolor natus soluta harum veniam enim deserunt sint. Unde corrupti magni nobis, non a, necessitatibus.</div> </div>
<div class="footer"> footer </div>
</div>
I'll go with the flex option while i was waiting for a feed back about it. ...
header,
footer {
background: tomato;
min-height: 15vh;/* any height is fine actually, mind some room for main if small window ... header& footer should not be covering the entire window */
display: flex;/* to dispatch children */
flex-direction: column;/* not in a row ! */
}
main {
background: turquoise;
flex: 1;/* fill up entire space */
overflow: auto;/* if space too small, let me scroll */
display: flex;/* to easy center content */
flex-direction: column;/* lets behave as block container */
}
div {
margin: auto;/* flex children will center on both axis , an easy one !*/
}
body {
max-width: 1024px;/* so it can shrink beloww , else remove the max- prefix */
height: 100vh;/* window's height */
margin: 0 auto;
display: flex;
flex-direction: column;
}
main:hover div:after {
display: block;
content: 'test';
height: 200vh;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main, hover me to make me taller and scroll</div>
</main>
<footer>
<div>footer </div>
</footer>
for the display table-layout, you should start from body :
html, body {
height:100%;
margin:0;
}
body {
width:1024px;
margin:auto;
display:table;
}
header,footer,main {
display:table-row;
}
header>div,main>div,footer>div {
display:table-cell;
vertical-align:middle;
}
main {
height:100%;
background:turquoise;
}
footer,header {
height:120px;
background:tomato;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main content, i will not scroll, i will push the footer</div>
</main>
<footer>
<div>footer </div>
</footer>
I have a div with a height of 100vh, and a width in percentage. When I add content to this div (in the example some lorem ipsum), the div moves downwards. When the div is empty of content, it stays at the top of the screen.
Inspecting this does not reveal anything unusual that I can find - no margins, position changes or anything.
How to I get the div with content to stay at the top of the page?
body {
font-size: 0;
}
.thin,
.wide {
height: 100vh;
display: inline-block;
font-size: 0;
}
.wide {
width: 61.80%;
background-color: red;
}
.thin {
width: 38.20%;
background-color: green;
}
.wide p {
margin: 0;
padding: 0;
font-size: 15px;
}
<div>
<div class="thin">
<div class="wide">
</div>
<div class="thin"></div>
</div>
<div class="wide">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span><span>Ab debitis earum error explicabo facilis fugit itaque, nobis officia optio pariatur perferendis quas quasi quibusdam quidem rerum similique voluptatem! Aliquam distinctio eos molestias natus nostrum ut voluptatem? Illo, quam!</span><span>Dolorem esse est impedit iusto maxime, neque officia voluptatum? Assumenda eos et facilis fugit incidunt inventore magni, maiores, minima modi mollitia nihil officiis quibusdam quisquam rem veniam vitae voluptatibus. Aut!</span>
</p>
</div>
</div>
Just add vertical-align: top to the CSS rule for the inline-block elements, namely, .thin and .wide.
By default, vertical-align is set to baseline. For an inline element with text, the base line corresponds to the bottom-most line of the text block, whereas for an empty element, the baseline is at the top where the text would start.
This leads to the top of the empty elements aligning with the bottom of the text in the filled element.
Setting vertical-align: top solves the problem.
body {
font-size: 0;
}
.thin,
.wide {
height: 100vh;
display: inline-block;
font-size: 0;
vertical-align: top;
}
.wide {
width: 61.80%;
background-color: red;
}
.thin {
width: 38.20%;
background-color: green;
}
.wide p {
margin: 0;
padding: 0;
font-size: 15px;
}
<div>
<div class="thin">
<div class="wide">
</div>
<div class="thin"></div>
</div>
<div class="wide">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span>
</p>
</div>
</div>