个人中心
gpt4 book ai didi

html - 侧边栏/内容/页脚的填充问题

转载 作者：太空宇宙 更新时间：2023-11-04 13:20:26 25 4
gpt4 key购买 nike

我有填充问题。我的侧边栏是 318px 宽，我的内容是 642px 宽，我的页脚是 642px 宽并且与我的内容对齐。我的侧边栏和内容都四周都有 20px 的填充，但我的侧边栏应该全高到页面底部，并在有更多内容时延伸，这也会压低页脚。如果信息太多，我很抱歉，但我会尽力提供尽可能详细的信息。

Here is a link to what I have so far如果需要完整的 HTML，您还可以查看源代码。我只是认为我正在谈论的元素是必需的，但那是为了以防万一还有更多。

HTML:

<!-- SIDEBAR -->
<div id="sidebar">
 <h1>Caul / Cbua</h1>


<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim,     at auctor mi tristique.
</div>

<h1>Commit</h1>
<div class="sidelink">
<ul>
  <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>

</div>

<!-- CONTENT -->
<div id="content">
<h1>News</h1>

<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>

<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

<!-- FOOTER -->
<div id="footer">
&copy; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS:

    /* Sidebar */
#sidebar {
background-color: #e7d9c9;
    background-image: url('/imgs/map.png');
    background-repeat: no-repeat;
/* height 100? */
width: 318px;
float: left;
padding-bottom: 20px;
}

.sidetext {
    padding: 5px 20px;
    font-size: 18px;
    font-family: Helvetica Neue;
    padding-bottom: 20px;
}

.sidelink {
    padding-bottom: 20px;
    margin: 0;
    padding: 0; 
    width:300px;
}

.sidelink ul {
    margin: 0; 
    padding: 0;
    margin-left: 20px;
}

.sidelink li {
    display: block;
    list-style: none;
}

.sidelink li a {
    display:block;
    font-family: Helvetica Neue;
    font-size:16px;
    color:#FFF;
    text-decoration:none;
    background-color:#1e416f;
    padding:5px;
    border-left:10px solid #FFF;
    padding-bottom: 20px;
}

.sidelink li a:hover {
    border-left:14px solid #1e416f;
    background-color:#e7d9c9;
    color: #1e416f;
}

h5 {
    font-family: Helvetica Neue: Light;
    font-size: 24px;
    color: #517f9c;
}

/* Content */
#content {
width: 642px;
float: right;
}

.article {
    padding: 5px 20px;
}

.articleimg {
    float: left;
    padding-right: 25px;
}


/* Footer */
#footer {
 font-family: Helvetica Neue: Regular;
 font-size: 12px;
 color: #94b9c4; 
 clear: both;
 width: 100%;
}

最佳答案

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>CAUL / CBUA</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!-- HEADER -->
<div id="header">
    <div id="caul-logo">

        <h4>Nova Scotia Community College</h4>

    </div>
</div>

<div id="container">

    <!-- NAVIGATION -->
    <div id="navi">
        <a href="#">Directories</a>
        <a href="#">Committees</a>
        <a href="#">Resources</a>
        <a href="#">About</a>
    </div>

    <!-- CONTENT -->
    <div id="content">
        <h1>News</h1>

        <div class="article">
            <img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />

            <h2>Lorem Ipsum</h2>
            <h3>Friday, August 16th</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                    Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                    Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                        Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                        Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                            Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                            Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                                Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                                Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a leo in lacus tempor egestas. 
                                    Maecenas faucibus neque nisi, eu condimentum enim porta id. Suspendisse blandit sem tellus. 
                                    Vivamus tristique, nunc faucibus pulvinar fringilla, sem ipsum molestie libero, id rhoncus turpis quam sit amet quam. </p>
                                </div>

                            </div>

                            <!-- SIDEBAR -->
                            <div id="sidebar">
                                <h1>Caul / Cbua</h1>

                                <div class="sidetext">
                                    Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
                                </div>

                                <h1>Commit</h1>
                                <div class="sidelink">
                                    <ul>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                        <li><a href="#">Lorem Ipsum</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- FOOTER -->
                            <div id="footer">
                                <p>&copy; Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            </div>
                        </div>
                    </body>
                    </html>

CSS

@charset "UTF-8";
/* CSS Document */

/* Main content styles */

html, body {
position: relative;
height: 100%;
font-family: Helvetica Neue: Regular;
}

h1 {
font-family: Helvetica Neue: Condensed Bold;
font-size: 24px;
color: #1d406f;
text-transform: uppercase;
margin-left: 20px;
}

h2 {
font-size: 18px;
color: #0f2233; 
}

h3, p {
font-size: 16px;
color: #0f2233;
}

a:link { color: #517f9c; }
a:highlight { color: #478ecc; text-decoration: underline; }

img {
display: block;
}

hr {
width: 90%;
margin: 0 auto;
margin-bottom: 20px;
}

/* Container */
#container {
position: relative;
margin: 0 auto;
width: 960px;
height:100%;
}

/* Header */
#header {
width: 960px;
height: 282px;
margin: 0 auto;
margin-top: 0;
background-image: url('http://redsky.incredifull.com/imgs/header.jpg');
}

#caul-logo {
top: 35px;
left: 20px;
width: 298px;
height: 91px;
position: relative;
background-image: url('/imgs/caul-header-logo.png');
}

h4 {
font-family: Helvetica Neue: Condensed;
text-decoration: bold;
font-size: 14px;
color: white;
text-transform: uppercase;
position: relative;
top: 215px;
left: 675px;
}

/* Navigation bar */
#navi {
font-family: Helvetica Neue: Condensed Bold;
font-size: 14px;
color: white;
text-transform: uppercase;
background-color: #1e416f;
height: 45px;   
margin-bottom: 20px;
padding-top: 20px;
}

#navi a {
color: white;
margin-left: 20px;
}

#navi a:hover {
background: white;
color: #1e416f;
}

.login {
color: #517f9c;
}

/* Sidebar */
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
width: 33.33333333333333%;
float: left;
padding-bottom: 20px;
position: absolute;
height: 100%;

}

#sidebar.h1 {
border-bottom: thick;
border-bottom-width: 75%;
}

.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}

.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0; 
width:300px;
}

.sidelink ul {
margin: 0; 
padding: 0;
margin-left: 20px;
}

.sidelink li {
display: block;
list-style: none;
}

.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}

.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}

h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}

/* Content */
#content {
width: 66.66666666666666%;
height: auto;
float: right;
padding-bottom: 20px;
position: relative;
height:100%;
}

.article {
width: 99%;
padding: 5px 20px;
}

.articleimg {
float: left;
padding-right: 25px;
}


/* Footer */
#footer {
text-align: left;
bottom: 0;
font-family: Helvetica Neue: Regular;
font-size: 12px;
width: 66.666666666%;
float: right;
clear: both;
margin-top: -50px;
}

#footer p {
text-indent: 20px;
color: #94b9c4; 
}

关于html - 侧边栏/内容/页脚的填充问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18391908/

25 4 0
文章推荐： php - 如何在 2 列 Bootstrap 2.32 布局的右列中修复表单
文章推荐： c++ - clang 教程 "missing file"上的段错误
文章推荐： 10 名学生输入的 C++ GPA Trunc
文章推荐： java - 广告不可见。不刷新添加。从现在开始安排广告刷新 60000 毫秒
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com