Viewport: how to resize to fit vertical space?

HTML & CSS
1

Hi there everyone!

I’m trying to utilize the viewport CSS element to shrink a div to fit the viewable space. From what I’ve read, the magic command is:

max-height: 100vh;

but when I add that to my css, it doesn’t resize the container that it was applied to (“site-container” in the style)

Here’s the page in question: http://after5eventscincy.com/viewport.html

I’m sure I’m just misunderstanding how to apply this element. Could someone set me straight on how to size site-container to vertically fit the viewport?

2

It is setting the height, but the content within the div is too large for it to work (add an overflow:scroll to see what I mean)

The problem is the images are hard coded heights and there just isn’t enough space available… For it to work, you’re going to need to revisit how you’re presenting your images (and making your logo responsive would help as well)

For example, you could add height: 20vh; min-height: 127px; max-height:254px; to your logo class and your logo is now responsive

Your images is are a bit trickier since you’re filling space full width there, so play with those to find where you want them to go.

3

Thanks for the help, Dave.

I’m misunderstanding what I used for the body images, I think. When I was writing it, I thought:

style="width: 100%; max-height:537px; height: auto;"

was telling the height of the image to remain in proper ratio to the width and that I wasn’t forcing a certain height for any of them. Am I understanding that incorrectly? Is it the max-height that is coming into play?

4

Actually, it’s the width of your photos and your logo that’s causing you the issues. You’ve set the width to 100% of the available size, and to set the height accordingly. Unfortunately for you, that means your height is almost always going to hit the max height. Anything over 1200px wide (which is almost nothing nowadays), and your images are all 537px tall. So you’ve got the 537px for your 2x pictures, 253px for your ring image and 254px for your logo (minimum - that grows as your viewport widens), 22px for your menu, and you’re at 1000 already before you even add in margins and padding.

5

Hi,

The only way you can do this and keep aspect ratios intact is to use background images (at present).

As you are using empty alt attributes on images then effectively you have no content so background images would suffice.

This is a rough mock up of how the effect can be achieved.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
*, *:before, *:after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;  /* ie8+ */
}
html,body{
	margin:0;
	padding:0;
	height:100%;
}
.wrap{
	display:table;
	height:100%;
	width:100%;
	max-width:1200px;
	margin:auto;
}
.tr{display:table-row}
.tc{display:table-cell;vertical-align:top;}
.header,.footer{height:1px}/* collapse to content height*/

.header h1{margin:0 auto;width:50%;}
.logo{width:100%;max-width:300px;margin:auto;height:auto;display:block;}
.footer img{width:100%;height:auto;}

.footer .tc{
	background:url(http://after5eventscincy.com/images/front_div_3.jpg) no-repeat 50% 50%;
	height:150px;
	height:15vh;
	background-size:cover;
	border-bottom:5px solid #fff;
}

.main{height:100%;}
.table{display:table;width:100%;height:100%;}
.leftimg{
	width:45%;
	display:table-cell;
	height:100%;
	overflow:hidden;
	border-bottom:10px solid #fff;
	background:url(http://after5eventscincy.com/images/front_div_1.jpg) no-repeat 50% 50%;
	background-size:cover;
}
.rightimg{
	border-left:10px solid #fff;
	border-bottom:10px solid #fff;
	width:54%;
	display:table-cell;
	height:100%;
	overflow:hidden;
	background:url(http://after5eventscincy.com//images/front_div_2.jpg) no-repeat 50% 50%;
	background-size:cover;

}
.main img{width:auto;height:100%}

/*  */
.menu {
    padding: 10px;
	margin:0 0 10px;
    background: #333;
    color: #FFF;
    font-weight: bold;
    overflow: hidden;
	display: flex;
    justify-content: space-between;
    text-align: center;
}
.menu a {
    padding: 0 10px;
	text-decoration:none;
	color:#fff;
}

@media screen and (max-width:600px){
	.menu a{display:none}
}

</style>
</head>

<body>
<div class="wrap table">
  <div class="header tr">
    <h1><a href="#"><img class="logo" src="http://after5eventscincy.com/images/logo.png" alt="After 5 events"></a></h1>
    <nav class="menu"> <a href="#">ABOUT</a> <a href="#">PACKAGES</a> <a href="#">LOVE NOTES</a> <a href="#">LOOKBOOK</a> <a href="#">CONTACT</a> </nav>
  </div>
  <div class="main tr">
    <div class="table">
      <div class="leftimg">&nbsp;</div>
      <div class="rightimg">&nbsp;</div>
    </div>
  </div>
  <div class="footer tr"><div class="tc">&nbsp;</div></div>
</div>
</body>
</html>

It has to be that structure and you can’t add divs outside .wrap.

I haven’t done the media queries but you should get the picture with the above. Just take the code and view it in your browsers to see how it looks as the urls are absolute so it will work as long as you are online.

Once you see how it works you may indeed think that the version you have already shows the images off to better effect but of course that’s a design choice.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.