html - 左侧导航的 CSS 定位

Question

我正在尝试重新创建一个网站并以某种方式放置图标。目前，我在左侧有一个带有图标的黑色导航栏。我希望黑色导航栏一直延伸到页面底部，我还希望将图标分开。

这是CSS代码:

#left_nav {
border: solid black;
}

#left_nav i {
color: gray;
padding-right: 35%;
padding-left: 35%;
margin-top: 60%;
}

HTML代码:

        <div id="left_nav" class="grid_2 alpha">
            <i class="ss-icon">home</i>
            <i class="ss-icon">time</i>
            <i class="ss-icon">user</i>
            <i class="ss-icon">question</i>
            <i class="ss-icon">play</i>
        </div>

Answer 1

http://jsfiddle.net/fmpeyton/3L5YV/

一些事情:

• 行内元素(即 <i> )不能有边距。您必须通过 display:block; 将该元素设为 block 级元素
• 为了使侧边栏覆盖整个页面，您可以将其高度设置为 100%，但前提是将其父元素(在本例中为 BODY 和同时存在的 HTML 元素)的高度设置为 100% 高度。

CSS:

html, body{
    height: 100%; // height declared so child #left_nav can expand to this height
}
#left_nav { 
    border: solid black;
    height: 100%; // will expand to height of parent
}

#left_nav i {
    display:block; // added display:block; to allow for margin
    color: gray;
    padding-right: 35%;
    padding-left: 35%;
    margin: 10px 0; // only available to block level elements
}