Question

只要每个部分的内容不超过部分高度，以下设置就可以正常工作。如果是这样，正如您在示例中所看到的，内容不属于包含部分。

通过在该部分添加“display：table”或“overflow：hidden”来解决此问题可以解决此问题，但会混淆菜单的活动状态行为。

我也尝试将高度设置为auto而不是100％，但是当部分开始相互重叠时，会混淆整个布局。

我迫切需要帮助，因为这个项目的整个布局取决于做到这一点。

任何建议都将受到高度赞赏。感谢。

HTML

<header>
    <nav>
        <ul>
            <li><a class="link active" href="#section_one">Section One</a>
            </li>
            <li><a class="link" href="#section_two">Section Two</a>
            </li>
            <li><a class="link" href="#section_three">Section Three</a>
            </li>
            <li><a class="link" href="#section_four">Section Four</a>
            </li>
        </ul>
    </nav>
</header>


<section id="section_one"></section>

<section id="section_two">

<div class="row">

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-last"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

</div>

<div class="row">

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-last"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

</div>

<div class="row">

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-left"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

    <div class="column-last"><img src="https://cdn0.iconfinder.com/data/icons/PRACTIKA/256/twitter.png"><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.<p></div>

</div>

</section>

<section id="section_three"></section>
<section id="section_four"></section>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0px none;
    font-family: "Calibri", sans-serif;
    font-weight: 700;
    font-size: 16px;
    vertical-align: top;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
}

 html, body {
    height: 100%
}

header {
    background: #CCCCCC;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 40px;
    width: 100%
}

nav {
    text-align: center;
}
nav ul {
    display: inline-block;
    text-align: center;
}
nav ul li {
    float: left;
    line-height: 40px;
    list-style-type: none;
    padding: 0px 10px;
}
nav ul li a {
    color: #999999;
    text-decoration: none;
}
nav ul li a.active {
    color: #222222;
    text-decoration: underline;
}

section {
    min-height: 100%;
    width: 100%;
}

#section_one {
    background: #BBBBBB;
}

#section_two {
    background: #999999;
}

#section_three {
    background: #777777;
}

#section_four {
    background: #999999;
}

.row {
    margin-left: auto;
    margin-right: auto; 
    width: 80%;
    max-width: 1600px;
}

.column-left { float: left; width: 25%; }
.column-last { float: right; width: 25%; }

.row p {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    line-height: 1.3;
    padding-left: 10%;
    padding-right: 10%;
}

.row img {
    width: 80%;
    height: auto;
    padding-top: 40px;
    padding-bottom: 20px;
}

的JavaScript

//-------- Script has negative scrolling of 40px for Header compensation --------:

$(document).ready(function () {
    $(window).scroll(function () {

        var y = $(this).scrollTop();

        $('.link').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 40) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });

    });
});

//------- This part adds smooth scrolling --------:

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 40)
                }, 850);
                return false;
            }
        }
    });
});

Answer 1

你只需要清除浮子。如果你添加这个：

<br style="clear: both" />

在您的部分结束时，它将起作用：JSFiddle

这个和问题中的原始小提琴在IE中都无法正常工作。我在这一行上将'40'更改为'39'并修复了IE中的问题：

scrollTop: (target.offset().top - 39)

Answer 2

或者您可以使用CSS方式修复浮动而无需编辑标记。

section:after {
    display: table;
    content: "";
    clear: both;
}

活动菜单问题高度

2 个答案: