首页 新闻 会员 周边

当div设置 position: fixed;之后，如何将嵌套的div设置 padding-bottom: ;

0
悬赏园豆：10 [待解决问题]

div设置 position: fixed;之后，嵌套的div设置 padding-bottom: 30px;时并不管用，该怎么做！！

 

 

<body>

<div id="top_nav">
    <div id="logo">
        <img src="images/logo.png">
    </div>
    <div id="nav">
        <a href="#">关于我们</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">技术能力</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">核心产品</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">销售业绩</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">网上订单</a>&nbsp;&nbsp;/&nbsp;&nbsp;
        <a href="#">联系我们</a>
    </div>
</div>

<div class="content">


</div>
</body>

 

body, div, a, img {
    font-family: "Arial";
    margin: 0;
    padding: 0;
}

#top_nav {
    background-color: #00B4CC;
    width: 100%;
    height: 85px;
    white-space: nowrap;
    position: fixed;
}

#logo {
    display: inline;
}

#nav {
    color: white;
    font-size: 18px;
    line-height: 130px;
    display: inline;
    white-space: nowrap;
    border: 1px solid red;
　　 padding-bottom: 30px;
}

#nav a {
    color: white;
    text-decoration: none;
}

.content {
    border: 1px solid red;
    height: 1000px;
}
horse_leo的主页 horse_leo | 初学一级 | 园豆：17
提问于：2015-12-24 13:56
< >
分享
所有回答(5)
0

为#nav设置一个height试试

乐享程序员 | 园豆：930 (小虾三级) | 2015-12-24 14:22

不起作用！！！

支持(0) 反对(0) horse_leo | 园豆：17 (初学一级) | 2015-12-24 14:47
0

把#nav下的line-height改成父元素的高度

冬雪映春影 | 园豆：210 (菜鸟二级) | 2015-12-24 14:47

不起作用

支持(0) 反对(0) horse_leo | 园豆：17 (初学一级) | 2015-12-24 14:49

@horse_leo: 我把你的代码复制粘贴试过了，是可以的

支持(0) 反对(0) 冬雪映春影 | 园豆：210 (菜鸟二级) | 2015-12-24 15:58

@horse_leo: 只是不知道你还有什么其他元素的东西给继承

支持(0) 反对(0) 冬雪映春影 | 园豆：210 (菜鸟二级) | 2015-12-24 15:59
0

这个我看了一下，应该是你的相法不对，你padding-bottom是起作用的，但是，你的文字你看上去没有动，是因为你的padding-bottom是加在文字下面，文字上面没动，nav的位置也没变，但是nav变高了，但是因为高出的被外层父div挡住了，所以你没发觉。你应用把内部的两个div设置为float:left。然后通过margin-top来定垂直位置，通过margin-left来定两个（log和nav）的水平位置。

ensleep | 园豆：1682 (小虾三级) | 2015-12-24 15:40

如果我吧内部的两个div设置为float:left，那么就无法实现log和nav居中了

支持(0) 反对(0) horse_leo | 园豆：17 (初学一级) | 2015-12-24 16:30

@horse_leo: 怎么会呢？你把他们俩再放到一个DIV里面，这个DIV也设置float:left;然后再设置margin-left:auto;margin-right:auto;

就可以了啊。如果此时发现外层div高度没有了，可以强制设置外层div高度，也可以在刚刚那个DIV的后面另一个兄弟div，设置clear:both

支持(0) 反对(0) ensleep | 园豆：1682 (小虾三级) | 2015-12-24 16:35

@ensleep: 不行的，这样的话log和nav不能居中

<div class="header">
    <div class="logo_nav">
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <div class="nav">
            <a href="#">关于我们</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">技术能力</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">核心产品</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">销售业绩</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">网上订单</a>&nbsp;&nbsp;/&nbsp;&nbsp;
            <a href="#">联系我们</a>
        </div>
    </div>
</div>
.header {
    background-color: #00B4CC;
    width: 100%;
    height: 85px;
    white-space: nowrap;
    text-align: center;
    position: fixed;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.logo_nav {
    float: left;
    text-align: center;
    margin: 0 auto;
}

.logo {
    float: left;
    padding-right: 30px;
    display: inline;
}

.nav {
    float: left;
    padding-left: 30px;
    color: white;
    font-size: 18px;
    display: inline;
    white-space: nowrap;
    border: 1px solid red;
    line-height: 85px;
}

.nav a {
    color: white;
    text-decoration: none;
}
支持(0) 反对(0) horse_leo | 园豆：17 (初学一级) | 2015-12-24 17:17
0

写个相对定位一下

搁忆 | 园豆：612 (小虾三级) | 2015-12-24 17:46
0

1.#top_nav设定了固定高度height，子div#nav的底部实际上的确变高了，可是再怎么变也是没有效果的，你把父div#top_nav的height去掉试试

2.如果你只是想要#nav往上移动，把#nav的属性line-height和padding-bottom去掉，然后加入绝对定位position: absolute;left: 100px;top: 30px;修改后代码如下：

#nav {
    color: white;
    font-size: 18px;
    display: inline;
    white-space: nowrap;
    border: 1px solid red;
    position: absolute;
    left: 100px;
    top: 30px;
}
PacificMoon | 园豆：202 (菜鸟二级) | 2015-12-25 15:56

不好意思，您的这个方法还是不行，跟我的想法不一样。

我现在已经把log和nav这两个DIV放入了logo_nav这个DIV，我需要的是log和nav这两个DIV在同一行并且居中，我还需要调整nav这个DIV距离logo_nav这个DIV的上下的位置

支持(0) 反对(0) horse_leo | 园豆：17 (初学一级) | 2015-12-26 10:01

@horse_leo: 也不知道楼主你现在解决这个问题了没，其实我是在你没有加float:left的代码里改的，在不在同一行，居不居中，top和left是可以调的，当然你用float:left也是可以，但我觉得用相对定位比较合适，还有我想说的是你那俩属性line-height和padding-bottom写那里是不合理的，根本没必要那样去写

支持(0) 反对(0) PacificMoon | 园豆：202 (菜鸟二级) | 2015-12-28 14:21
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。