-1

I'm trying to set 100% of height to a HTML element. On mobile, this div will go under the .div_left div, and the floating will be cleared.

I have these divs on my theme:

<div class="col-md-7 div_left"></div>
<div class="col-md-5 div_right"></div>
<div class="clearfix"></div>

I give them this css: (global bootstrap.css also included)

.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px; height:100%;}

I tryed height:100vh; but that's not working, when the page has to many content, and I can scroll it vertically.

I also tryed min-height:100% but that didn't work. I can see the right div gray background, but that's just because it has padding.

Screenshot here

Second try: Second image

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
max777
  • 143
  • 5
  • 18
  • 1
    Could you clarify your question ? Show us what it looks like right now and what you want it to look like for example ? – Jake Dec 06 '18 at 13:09
  • Please clean up to HTML and provide enough to repro the issue. And why don't you use `min-height:100vh`? – Carol Skelly Dec 06 '18 at 13:09
  • I writed, that why 100vh isnt working. – max777 Dec 06 '18 at 13:13
  • You said `height:100vh` and `min-height:100%` wasn't working, *not* **`min-height:100vh`**. Please clarify the question and exactly what you've tried. Also what exactly does *"when the page has to many content, and i can scroll it vertically"* mean? What is the expected behavior? Will the extra content be hidden and not accessible? Do you expect the scroll bar somewhere else? – Carol Skelly Dec 06 '18 at 13:14
  • I added an image to the post. You can see on it, that i have to many content, and i scrolled down the site. When i scroll, the gray background will end, thats why 100vh isnt working. – max777 Dec 06 '18 at 13:22

2 Answers2

0

Use min-height 100vh on the entire row...

.div_left{ background:#fff; padding:40px;}
.div_right{ background:#ccc; padding:40px;}

.mvh-100 {
    min-height: 100vh;   
}

https://www.codeply.com/go/vTYz8XE6cG

Desktop:

enter image description here

Mobile:

enter image description here

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • No. I added an image to the post, with second name. Thats what your code does, i copied it to my file. – max777 Dec 06 '18 at 13:35
  • No, that's not what the code does. Look at the demo. You're not clarifying exactly what is expected. If it's not working you have other CSS or HTML that's effecting the layout. – Carol Skelly Dec 06 '18 at 13:37
  • In the html, the divs have flex- classes. Where are these added in the css? – max777 Dec 06 '18 at 13:42
  • They're part of Bootstrap, but they're not required for `min-height:100vh` to work. You'll see the demo also works fine w/o those, but they could be used to change the desktop vs mobile layout. But since you haven't clarified what to expect it's all guesswork. – Carol Skelly Dec 06 '18 at 13:43
  • Now i see, i added display:flex to the mv-100 class. Now, the height isfine, but the divs are floating in mobile view, they dont go under each other. – max777 Dec 06 '18 at 13:44
  • Are you using Bootstrap 3 or Bootstrap 4? – Carol Skelly Dec 06 '18 at 13:45
  • Well, thats a good question, because when i compressed the css file, it removed all comment. But, i think, its the version 3. – max777 Dec 06 '18 at 13:47
  • Well that explains the problem. There are many other questions on SO that already address this and please make sure you properly tag questions in the future. – Carol Skelly Dec 06 '18 at 13:47
  • Yes, now i understand it. But whats missing from the 3? – max777 Dec 06 '18 at 13:48
0

To use height:100%; a parent element should have a height: fixedHeight; because that it's not working for you.

https://www.w3schools.com/cssref/pr_dim_height.asp

% Defines the height in percent of the containing block

What you need to define is: 100% of what?

Here's more information about vh

Make a div 100% height of the browser window

There says:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

HNL
  • 103
  • 13