Height auto not working on header

I have a header wrapped inside of div.wrapper element. The header element doesn’t adjust itself to the height to the height of the content. Even if I set height:auto, the height doesn’t change.

	<div class="wrapper">
		<div class="hamburger">
			<div class="burger burger--top">
				<div></div>
			</div>
			<div class="burger burger--bottom">
				<div></div>
			</div>
		</div>
		<header class="header">
			<object id="my-svg" type="image/svg+xml" data="./assets/img/magic-wand.svg" class="header__image"></object>
			<div class="header__content">
				<h1 class="header__heading">The Wand. Reimagined</h1>
				<h3 class="header__sub-heading">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit aspernatur earum sapiente similique ipsum dolores atque. Id natus ratione iusto. Wengex is everything you love about a wand. Taken to the extreme.</h3>
			</div> 
		</header>
	</div>

SCSS:

.header {
	@include reset;
	@include flexbox(true);
	width: 100vw;
	background-color: #01050e;
	color: #ffffff;
	flex-direction: column;

	&__heading {
		font-size: 7.2rem;
	}

	&__content {
		@include flexbox(true);
		flex-direction: column;
		transform: translateY(10vh);
	}

	&__sub-heading {
		margin-top: 20px;
		font-family: 'Interface';
		font-weight: 400;
		font-size: 2.4rem;
		width: 50vw;
		text-align: center;
		color: #ffdceb;
	}

	&__image {
		width: 60vw;
		height: 40vh;
	}
}

Compiled CSS:


.wrapper {
  max-width: 100%;
  min-height: 100vh;
  width: 100vw;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.header {
  margin: 0;
  padding: 0;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100vw;
  background-color: #01050e;
  color: #ffffff;
  height: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.header__heading {
  font-size: 7.2rem;
}

.header__content {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: translateY(10vh);
          transform: translateY(10vh);
}

.header__sub-heading {
  margin-top: 20px;
  font-family: 'Interface';
  font-weight: 400;
  font-size: 2.4rem;
  width: 50vw;
  text-align: center;
  color: #ffdceb;
}

.header__image {
  width: 60vw;
  height: 40vh;
}

When height is not set at all or even when height is set to auto:

What could be the error?

Hi, the problem looks to be the transform: translateY(10vh); on header-content which in effect has pushed the text outside of the header. If I remember correctly it behaves similar to relative positioning, the element is moved visually while keeping it’s original place in the page flow.

If you want to push it down just put a top margin on it.

Oh and I changed the underscores to hyphens on your class names, just a habit of mine.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {margin:0}

.wrapper {
  min-height: 100vh;
  /*width: 100vw;*/
  transition: 0.5s;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #01050e;
  color: #ffffff;

}
.header-heading {
  font-size: 7.2rem;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /*transform: translateY(10vh); */
  margin-top:10vh;
}
.header-sub-heading {
  margin-top: 20px;
  font-family: 'Interface';
  font-weight: 400;
  font-size: 2.4rem;
  width: 50vw;
  text-align: center;
  color: #ffdceb;
}
.header-image {
  width: 60vw;
  height: 40vh;
  background: aqua;
}


</style>

</head>
<body>

<div class="wrapper">
		<!-- <div class="hamburger">
			<div class="burger burger--top">
				<div></div>
			</div>
			<div class="burger burger--bottom">
				<div></div>
			</div>
		</div> -->
		<header class="header">
			<object id="my-svg" type="image/svg+xml" data="./assets/img/magic-wand.svg" class="header-image"></object>
			<div class="header-content">
				<h1 class="header-heading">The Wand. Reimagined</h1>
				<h3 class="header-sub-heading">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit aspernatur earum sapiente similique ipsum dolores atque. Id natus ratione iusto. Wengex is everything you love about a wand. Taken to the extreme.</h3>
			</div>
		</header>
	</div>

</body>
</html>
2 Likes

Yes transforms have no effect on the flow of the page (otherwise the page would likely freeze when you animated them through too much re-drawing of the whole page). The transformed element always maintains its original space in the page even though it may appear somewhere else.

1 Like

The top margin pushes the image above towards the top as well which I don’t desire. I only want the text to move down.

There must be something else going on that we can’t see with the code posted as Rays demo only pushes the text downwards.

Do you have a live link to look at?

Try CSS position relative property.

That won’t help as relatively moved elements always occupy the same space in the flow just like transformed elements. The space they originally occupied is preserved even though they may appear to be somewhere else.

Whenever I use margins with an element that has a preceding or succeeding element, the margin usually pushes both the elements. Or probably because that is because of flexbox. Does flexbox cause such behavior as my sections generally use flexbox?

I’d need to see a specific example but the rules for margins are pretty clear if a little unintuitive at times. I’m guessing you are falling foul of collapsing margins but once you understand the implications you can work around any issues quite easily.

If you meant something else then I’d need to see a demo and could then explain why it does what it does :slight_smile:

Other than the screenshot you posted to give a hint to what you are wanting, I’m not exactly sure what your intention is.

I’m guess this is the main page and you are wanting it min-height 100vh. Have you tried just letting flexbox take care of it for you. I mean if you remove that header-content div and then let the image and both heading elements become sibling flex items. Doing that flex can arrange them as you like with justify content (center, space-between, space-around).

Be sure to zero out default margins on your headings too. Then you will not need to deal with any margins at all. Of course you may need a top/bottom margin on the h1 to make it look better on smaller screens.

I backed off on the h1 font-size a little bit too.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {margin:0}

.wrapper {
  /*min-height: 100vh; moved to header*/
  /*width: 100vw;*/
  transition: 0.5s;
}
.header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #01050e;
  color: #ffffff;
}
.header-image {
  width: 60vw;
  height: 40vh;
  background: aqua;
}
h1.header-heading {
  font-size: 5rem;
  margin:0;
  text-align: center;
}
h2.header-sub-heading {
  margin:0;
  font-family: 'Interface';
  font-weight: 400;
  font-size: 2.2rem;
  width: 60vw;
  text-align: center;
  color: #ffdceb;
}

</style>

</head>
<body>

<div class="wrapper">
		<!-- <div class="hamburger">
			<div class="burger burger--top">
				<div></div>
			</div>
			<div class="burger burger--bottom">
				<div></div>
			</div>
		</div> -->
		<header class="header">
			<object id="my-svg" type="image/svg+xml" data="./assets/img/magic-wand.svg" class="header-image"></object>
			<h1 class="header-heading">The Wand. Reimagined</h1>
			<h2 class="header-sub-heading">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit aspernatur earum sapiente similique ipsum dolores atque. Id natus ratione iusto. Wengex is everything you love about a wand. Taken to the extreme.</h2>
		</header>
	</div>

</body>
</html>
2 Likes

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