Question

我想要一个我想要位于视口顶部的导航栏。我的导航包装器由一个标题容器包围，由我的主包装器包围。

由于我不明白的原因，我的标题容器没有按预期运行。如果我将其宽度设置为100％，它会远远超出主要包装器的右侧。然后我删除了＆＃34;宽度：100％＆＃34;因为我读了几个默认为div的地方，以填充其父级的宽度。当我删除宽度：100％时，标题容器缩小到比主包装器小一些的大小。

关于这里可能出现什么问题的任何想法？这里的代码后跟一个jsfiddle：

HTML
<div class="main-wrap">
  <div class="headercontainer">
    <div class="nav-wrap">
        <ul>
            <li><a href="">home</a></li>
            <li><a href="">about</a></li>
            <li><a href="">news</a></li>
            <li><a href="">blog</a></li>
            <li><a href="">contact</a></li>
        </ul>
    </div> <!-- end nav-wrap-->
</div> <!-- end headercontainer -->

<div>
    <font size="6em">
    <br><br>
    this is the main wrapper with filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    this is the story filler<br>
    </font>
</div>

CSS
html {
height: 100%;
}

body {
height: 100%;
min-height: 100%
margin: 0px auto;
padding: 0px auto;
background: #e1e1e1;
font: normal 400 1em/1.5 sans-serif;
}

.main-wrap {
display: block;
background-color: white;
min-height: 100%;
width: 70%;
max-width: 1200px;
margin: 0 auto;
}

.headercontainer {
position: fixed;
top: 0;
width: 100%;
padding: 10px;
background-color: #990033;
display: block;
z-index: 100;
margin-top: 0;
margin-bottom: 25px;
}

.nav-wrap {
padding: 14px 10px 12px;
box-sizing: border-box;
border-bottom: thin solid #000000;
background-color: white;
overflow:hidden;
text-align: left;
text-transform: uppercase;
font-size: .8em;
color: green;
}

ul{
margin: 0px;
}

li {
list-style-type: none;
display: inline;
margin-right: 20px;
}

https://jsfiddle.net/strudelmedia/01gr4555/10/

Answer 1

switch ([twoFingerPinchA state]) { case UIGestureRecognizerStatePossible: { } break; case UIGestureRecognizerStateBegan: { NSString *inPinch = [[NSUserDefaults standardUserDefaults] objectForKey:@"pinchValue"]; float Pinch = [inPinch floatValue]; twoFingerPinchA.scale = Pinch; } break; case UIGestureRecognizerStateChanged: { } break; case UIGestureRecognizerStateEnded: { NSString *pinchString = [NSString stringWithFormat:@"%f",twoFingerPinchA.scale]; NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; [defaults setObject:pinchString forKey:@"pinchValue"]; } break; case UIGestureRecognizerStateCancelled: { } break; case UIGestureRecognizerStateFailed: { } break; }中的百分比相对于元素的包含块的宽度进行解析。

通常，包含块的是最近的块祖先，可能是父。

但是，对于固定定位元素，包含块是视口。（*）

因此，width使其与视口一样宽。

（*）有一些例外，比如变形的祖先。但是如果你使用它，当你滚动文档时，元素将不再被修复。

Answer 2

关于定位的

From MDN：

固定定位类似于绝对定位，但元素的包含块是视口。

因此，父块不是div.main-wrap，而是UA的视口，其中100％是从中计算的。

Answer 3

试试这个https://jsfiddle.net/01gr4555/12/

只需在CSS

中更改此内容即可

.headercontainer {
    background-color: #990033;
    box-sizing: border-box;
    display: block;
    margin-bottom: 25px;
    margin-top: 0;
    max-width: 1200px;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 70%;
    z-index: 100;
}

Answer 4

你可以尝试

位置：粘性;

所以你解决了父宽度问题，导航将会粘在页面顶部;不完全是你想要的，但它可能对你有用。

Div不延伸到父级的宽度

4 个答案: