当前位置: 动力学知识库 > 问答 > 编程问答 >

html - header div height not calculating, 'clear fix' not working?

问题描述:

I'm currently doing a bit of a redesign on my site and have run into a slight issue regarding a header div element and some child elements with a float: attribute.

My header is showing a height value of 0, and not calculating the contents itself correctly. I've done a bit of reading around and I understand that this is most likely down to floating elements within the navigation (in this case .desktoplinkitem).

My header code is as follows:

<div class="header videohead">

<div class="mobile-nav">

<div class="mobile-link-container">

<div class="mobile-links">

<li class="linkitem"><a href="homepage">Video</a></li>

<li class="linkitem"><a href="stills">Stills</a></li>

<li class="linkitem"><a href="about">About</a></li>

<li class="linkitem"><a href="emaillink">Contact</a></li> </div>

</div>

</div>

<div class="name logo">Name<br>Title</div>

<div class="right-nav">

<button class="mobilemenu mobilemenu--htx">

<span></span>

</button>

<div class="desktop-nav">

<ul>

<li class="desktoplinkitem"><a href="email-link">Contact</a></li>

<li class="desktoplinkitem"><a href="about.php">About</a></li>

<li class="desktoplinkitem"><a href="link">Stills</a></li>

<li class="desktoplinkitem"><a href="home">Video</a></li> </ul>

</div>

</div>

</div>

The CSS is styled like:

.header {

width: 100%;

position: absolute;

top: 0;

z-index: 600;

flex: none;

}

.videohead {

display: inline-block;

}

.desktoplinkitem {

visibility: inherit;

color: inherit;

background: none !important;

}

.linkitem {

visibility: inherit;

color: #FFFFFF;

transform: scale(2, 2) translateX(-100px);

opacity: 0;

}

.right-nav {

position: absolute;

right: 0%;

padding: 35px;

color: #000000;

text-decoration: none;

}

.right-nav ul {

height: auto;

padding: 8px 0px;

margin: 0px;

float: right;

}

.right-nav li {

display: inline;

padding-top: 1em;

padding-bottom: 1em;

padding-left: 1em;

letter-spacing: 1px;

float: right;

}

I've tried to add a clear fix hack with no result (using the following):

.videohead:after {

content: " ";

display: table;

height: 0;

clear: both;

*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );

}

The page can be seen here

Is there another way to approach this?

网友答案:

It is fixed by removing the position: absolute; from .logo.

You header stays empty because every child inside it has been positioned in a different way the either static or relative.

The floating could have been the issue if they were a direct child of .header

分享给朋友:
您可能感兴趣的文章:
随机阅读: