2

if there is no long text in "main_body" div,height of "main_body" div is equal to it's parent.but if i put long text,the height of "main_body" div is not the same height as it's parent.

html

<body> 
    <div class="main_body">
        <div class="i_m_nothing">
     
        </div>
    Hello, everyone! This is the LONGEST TEXT EVER! I was inspired by the various other "longest texts ever" on the internet, and I wanted to make my own. So here it is! This is going to be a WORLD RECORD! This is actually my third attempt at doing this. The first time, I didn't save it. The second time, the Neocities editor crashed. Now I'm writing this in Notepad, then copying it into the Neocities editor instead of typing it directly in the Neocities editor to avoid crashing. It sucks that my past two attempts are gone now. Those actually got pretty long. Not the longest, but still pretty long. I hope this one won't get lost somehow. Anyways, let's talk about WAFFLES! I like waffles. Waffles are cool. Waffles is a funny word. There's a Teen Titans Go episode called "Waffles" where the word "Waffles" is said a hundred-something times. It's pretty annoying. There's also a Teen Titans Go episode about Pig Latin. Don't know what Pig Latin is? It's a language where you take all the consonants before the first vowel, move them to the end, and add '-ay' to the end. If the word begins with a vowel, you just add '-way' to the end. For example, "Waffles" becomes "Afflesway". I've been speaking Pig Latin fluently since the fourth grade, so it surprised me when I saw the episode for the first time. I speak Pig Latin with my sister sometimes. It's pretty fun. I like speaking it in public so that everyone around us gets confused. That's never actually happened before, but if it ever does, 'twill be pretty funny. By the way, "'twill" is a word I invented recently, and it's a contraction of "it will". I really hope it gains popularity in the near future, because "'twill" is WAY more fun than saying "it'll". "It'll" is too boring. Nobody likes boring. This is nowhere near being the longest text ever, but eventually it will be! I might still be writing this a decade later, who knows? But right now, it's not very long. But I'll just keep writing until it is the longest! Have you ever heard the song "Dau Dau" by Awesome Scampis? It's an amazing song. Look it up on YouTube! I play that song all the time around my sister! It drives her crazy, and I love it. Another way I like driving my sister crazy is by speaking my own made up language to her. She hates the languages I make! The only language that we both speak besides English is Pig Latin. I think you already knew that. Whatever. I think I'm gonna go for now. Bye! Hi, I'm back 
    </div>
</body>

CSS

.html,body {
  height: 100%;
  background-color:blue;
  margin: 0;
}

.main_body {
  height: 100%;
  background: yellow;
}

.i_m_nothing{
  height:50%;
  width:50%;
  background-color:red;
}

the quick solution that i found by myself was :

Css

.main_body {
  height: 100%;
  background: yellow;
  position:fixed;
  overflow-y:auto;
}

But This solution isn't the solution which i want.

here you can run my html and css on code pen : you can uncomment some css inside .main_body to know the result which i want.

Ever Loser
  • 69
  • 1
  • 6
  • Could you describe more what you want? Is it that the .main-body should have the height of it's parent? Are you sure this isn't what is happening? – A Haworth Sep 19 '21 at 15:45
  • Try setting the height of the body to 100vh rather than 100% – Uchechukwu Nwafor Sep 19 '21 at 15:49
  • yeah , the height of .main_body should equal to it's parent after i add long text inside .main_body.if i didn't add any long text,the height of .main_body was equal to it's parent but after i added long text inside .main_body,the height of .main_body wasn't not equal to it's parent. – Ever Loser Sep 19 '21 at 16:04
  • here you guy can run my html and css => https://codepen.io/makerdz/pen/QWgmxdz – Ever Loser Sep 19 '21 at 16:43
  • you can uncomment some css inside .main_body to know the result which i want. – Ever Loser Sep 19 '21 at 16:43

2 Answers2

0

The main-div has exactly the same height as the body - look in your browser's dev tools and you will see that the computed heights of both are the same and they are the height of the viewport.

Now, you can scroll down through the contents of main-div because you haven't said you don't want that to be possible.

If you want the text cut off so it's not viewable you can set overflow-y: hidden on the main-div.

UPDATE: Initially I had misunderstood what was required. The subsequently provided code which showed a 'solution' using position:fixed demonstrated what the visual outcome was to be - (but was required without the fixed).

Although the main-div and the body do have the same height using the code given in the question, and that can be verified by looking at the computed height in the browser's dev tools, the problem lies in the initial setting of body height at 100%.

100% of what? As the long text and the red div are within the main-div which is itself within the body they expand in height because the height is not fixed.

Giving the html element a height of 100vh means the body height at 100% also is 100vh as is main-div and the red box is 50% of this height.

The treatment of background-color on the html and body elements differs a bit from 'normal' elements. If html doesn't have a background set then it takes on the background of body and covers the whole page. See discussion of this at Applying a background to <html> and/or <body>. So in this instance if we run the code without an html element we lack some blue at the bottom.

(Side note: when running code in SO's snippet system or codepen etc they tend to put in html and body elements if they aren't already there so the demos sometimes seem to 'work' while the pure code given without these doesn't).

Here's the snippet with initial height set.

html {
  height: 100vh;
}

body {
  height: 100%;
  background-color: blue;
  margin: 0;
}

.main_body {
  height: 100%;
  background: yellow;
}

.i_m_nothing {
  height: 50%;
  width: 50%;
  background-color: red;
}
<body>
  <div class="main_body">
    <div class="i_m_nothing">

    </div>
    Hello, everyone! This is the LONGEST TEXT EVER! I was inspired by the various other "longest texts ever" on the internet, and I wanted to make my own. So here it is! This is going to be a WORLD RECORD! This is actually my third attempt at doing this.
    The first time, I didn't save it. The second time, the Neocities editor crashed. Now I'm writing this in Notepad, then copying it into the Neocities editor instead of typing it directly in the Neocities editor to avoid crashing. It sucks that my past
    two attempts are gone now. Those actually got pretty long. Not the longest, but still pretty long. I hope this one won't get lost somehow. Anyways, let's talk about WAFFLES! I like waffles. Waffles are cool. Waffles is a funny word. There's a Teen
    Titans Go episode called "Waffles" where the word "Waffles" is said a hundred-something times. It's pretty annoying. There's also a Teen Titans Go episode about Pig Latin. Don't know what Pig Latin is? It's a language where you take all the consonants
    before the first vowel, move them to the end, and add '-ay' to the end. If the word begins with a vowel, you just add '-way' to the end. For example, "Waffles" becomes "Afflesway". I've been speaking Pig Latin fluently since the fourth grade, so it
    surprised me when I saw the episode for the first time. I speak Pig Latin with my sister sometimes. It's pretty fun. I like speaking it in public so that everyone around us gets confused. That's never actually happened before, but if it ever does,
    'twill be pretty funny. By the way, "'twill" is a word I invented recently, and it's a contraction of "it will". I really hope it gains popularity in the near future, because "'twill" is WAY more fun than saying "it'll". "It'll" is too boring. Nobody
    likes boring. This is nowhere near being the longest text ever, but eventually it will be! I might still be writing this a decade later, who knows? But right now, it's not very long. But I'll just keep writing until it is the longest! Have you ever
    heard the song "Dau Dau" by Awesome Scampis? It's an amazing song. Look it up on YouTube! I play that song all the time around my sister! It drives her crazy, and I love it. Another way I like driving my sister crazy is by speaking my own made up
    language to her. She hates the languages I make! The only language that we both speak besides English is Pig Latin. I think you already knew that. Whatever. I think I'm gonna go for now. Bye! Hi, I'm back
  </div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • i want the result as the height of .main_body should follow to the height of it's parent after i added long text.i also put the solution which i found into my question but that solution i found was not unique solution for my problem. – Ever Loser Sep 19 '21 at 16:15
  • main-body is exactly the same height as its parent - it's just that you can scroll down to see the rest of the content unless you stop it scrolling. Why do you think it hasn't got the same height as its parent? – A Haworth Sep 19 '21 at 16:16
  • the background color of .main_body wasn't full size of it's parent after i added long text. – Ever Loser Sep 19 '21 at 16:19
  • here you can run my html and css => https://codepen.io/makerdz/pen/QWgmxdz – Ever Loser Sep 19 '21 at 16:32
  • I think I've understood what you require now I've seen your code which gives the right visual result, though I understand why you don't want to use fixed. I have updated my answer with an explanation and a working snippet. – A Haworth Sep 19 '21 at 17:36
0

you can try this code

    .main_body {
      min-height: 100vh;
      background: yellow;
    }
GannaHap
  • 71
  • 1
  • 4