如何保持内联块和页脚分开？

时间：2018-03-22 19:33:40

标签： html css

所以我试图在我的网站上有一个侧面导航，但我不知道如何将它作为一个块，当它击中页脚标签时会停止。我尝试按照W3S提供的代码进行操作，但如果它位于position: fixed下，则会导致侧面导航卡住，所以我尝试了position: absolute。不知道该怎么办。我现在拥有的当前代码超过了页脚。

HTML：

<!-- Side Nav Starts Here -->

<span id="side-nav">
<nav>
    <ul>
        <li><a href="">Starting Japanese</a></li>
        <li><a href="">Particles</a></li>
        <li><a href="">Vocabulary</a></li>
        <li><a href="">Syntax</a></li>
        <li><a href="">Grammar</a></li>
        <li><a href="">Kanji</a></li>
    </ul>
</nav>
</span>    

<!-- Side Nav Ends Here -->
<!-- Content Starts Here -->

<span id="content">
<article>
    <h3>Using This</h3>
    <p>I guess you say something about this page's objective? Eh,
    <br>I'll come back to it later, I suppose.
    <br>A test
    <br>Another Text. okay.
    <br><br>asd<br>asd<br><br>asd<br><br><br><br>asdasd<br>asd<br>
    <br>asd<br>asd<br><br>asd<br><br><br><br>asdasd<br>asd<br></p>
</article>
</span>

<!-- Content Ends Here -->
<!-- Footer Starts Here -->

<footer id="foot">
<hr>
<p>Follow me on:</p>
<a href="https://www.instagram.com/justchavz/" target="_blank"><img src="images/logos/instagram-logo.jpg" alt="Instagram Logo"></a>
<a href="https://twitter.com/JustChavz" target="_blank"><img src="images/logos/twitter_logo.jpg" alt="Twitter Logo"></a>
<a href="http://chavezphotography.tumblr.com/" target="_blank"><img src="images/logos/tumblr_logo.jpg"></a>
<hr>
</footer> 

<!-- Footer Ends Here -->

CSS：

/* Side Nav Starts Here */

#side-nav {
display: grid;
background-color: #0f0f0f;
width: 12em;
border: 6px solid #0f0f0f;
height: 100%;
position: absolute;
}

#side-nav nav {
content: "";
display: block;
border: 5px solid #ffffff;
}

#side-nav ul {
text-decoration: none;
padding-left: 0px;
margin-bottom: 0.5em;
}

#side-nav ul li {
display: block;
width: 9em; /* Ask how to get the precised measure */
margin-left: auto;
margin-right: auto;
height: inherit;
margin-bottom: inherit;
}

#side-nav ul li a {
font-family: 'Courgette', cursive;
display: block;
color: white;
text-align: left;
padding-bottom: 1em;
text-decoration: none;
font-size: 1.1em;
padding-top: 1em; 
}

/* Side Nav Ends Here */
/* Content Starts Here */

#content {
display: block;
padding-left: 3em;
margin-left: 12em;
}

content h2, h3, h4, h5 {
font-family: 'Courgette', cursive;
font-size: 25px;
}

#content p {
font-family: 'Nanum Myeongjo', serif;
padding-left: 2em;
}
/* Content Ends Here */
/* Footer Starts Here */

#foot {
font-family: 'Poiret One', cursive;
font-style: oblique;
font-weight: bolder;
text-align: center;
}

#foot img {
display: inline-block;
width: 32px;
height: 32px;
}

/* Footer Ends Here */

2 个答案:

答案 0 :(得分：0)

您需要移除absolute定位并使用float并排保留您的元素而不会在content上留下巨大余量，请calc使用content {1}}宽度因此它保持动态并且clear:both为页脚，因此它会保留在您的内容之下。

这里是一个小提琴（我在侧面导航中添加了一些元素以使其更大）：https://jsfiddle.net/6worpkj2/6/

如果你想在侧面导航上有一个固定的高度，使用多个像素（或em）代替100%并添加overflow:scroll以便在你有更多元素时使用滚动条可以适应它，随意实现:)

我希望这有助于或至少让您了解如何实现您想要的目标。

＆＃13;
＆＃13; 
/* Side Nav Starts Here */

#side-nav {
display: grid;
background-color: #0f0f0f;
width: 12em;
border: 6px solid #0f0f0f;
height: 100%;
/* position: absolute; */ /* removed */
float: left; /* added */
}

#side-nav nav {
content: "";
display: block;
border: 5px solid #ffffff;
}

#side-nav ul {
text-decoration: none;
padding-left: 0px;
margin-bottom: 0.5em;
}

#side-nav ul li {
display: block;
width: 9em; /* Ask how to get the precised measure */
margin-left: auto;
margin-right: auto;
height: inherit;
margin-bottom: inherit;
}

#side-nav ul li a {
font-family: 'Courgette', cursive;
display: block;
color: white;
text-align: left;
padding-bottom: 1em;
text-decoration: none;
font-size: 1.1em;
padding-top: 1em; 
}

/* Side Nav Ends Here */
/* Content Starts Here */

#content {
display: block;
padding-left: 3em;
/*margin-left: 12em;*/ /* removed */
float: right; /* added */
width: calc(100% - 16em); /* added */
height: 100%; /* added */
}

content h2, h3, h4, h5 {
font-family: 'Courgette', cursive;
font-size: 25px;
}

#content p {
font-family: 'Nanum Myeongjo', serif;
padding-left: 2em;
}
/* Content Ends Here */
/* Footer Starts Here */

#foot {
font-family: 'Poiret One', cursive;
font-style: oblique;
font-weight: bolder;
text-align: center;
clear: both; /* added */
}

#foot img {
display: inline-block;
width: 32px;
height: 32px;
}

/* Footer Ends Here */
＆＃13; 
<!-- Side Nav Starts Here -->

<span id="side-nav">
<nav>
    <ul>
        <li><a href="">Starting Japanese</a></li>
        <li><a href="">Particles</a></li>
        <li><a href="">Vocabulary</a></li>
        <li><a href="">Syntax</a></li>
        <li><a href="">Grammar</a></li>
        <li><a href="">Kanji</a></li>
        <li><a href="">Kanji</a></li>
        <li><a href="">Kanji</a></li>
        <li><a href="">Kanji</a></li>
        <li><a href="">Kanji</a></li>
    </ul>
</nav>
</span>    

<!-- Side Nav Ends Here -->
<!-- Content Starts Here -->

<span id="content">
<article>
    <h3>Using This</h3>
    <p>I guess you say something about this page's objective? Eh,
    <br>I'll come back to it later, I suppose.
    <br>A test
    <br>Another Text. okay.
    <br><br>asd<br>asd<br><br>asd<br><br><br><br>asdasd<br>asd<br>
    <br>asd<br>asd<br><br>asd<br><br><br><br>asdasd<br>asd<br></p>
</article>
</span>

<!-- Content Ends Here -->
<!-- Footer Starts Here -->

<footer id="foot">
<hr>
<p>Follow me on:</p>
<a href="https://www.instagram.com/justchavz/" target="_blank"><img src="images/logos/instagram-logo.jpg" alt="Instagram Logo"></a>
<a href="https://twitter.com/JustChavz" target="_blank"><img src="images/logos/twitter_logo.jpg" alt="Twitter Logo"></a>
<a href="http://chavezphotography.tumblr.com/" target="_blank"><img src="images/logos/tumblr_logo.jpg"></a>
<hr>
</footer> 

<!-- Footer Ends Here -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

#side-nav {
    display: grid;
    background-color: #0f0f0f;
    width: 12em;
    border: 6px solid #0f0f0f;
    position: absolute;
    }
你可以避免 ＆LT; - 高度= 100％ - ＆GT;

它实际上使得侧面导航很长，以填满整个页面。 在页脚中使用＆lt; - position：fixed - ＆gt;是没有问题的， 你也可以用 ＆LT; - z索引：1 - ＆GT; 使用页脚的背景颜色也会很好，如果是这样你可以设置高度 并可以指定屏幕中应该修复的位置。

相关问题
最新问题