0

我正在尝试创建一个带有页眉、粘性页脚和中间三个 div 的页面。现在它看起来像这样：

在此处输入图像描述

这是我的html和css：

索引.php

<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
    <script src="reqscripts/jquery.js" type="text/javascript"></script>
    <script src="js/application.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/application.css">
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>ONE DAY ONLY</h1>
            <p>THE BIZZ()</p>
        </header>
        <div id="login"></div>
        <div id="register"></div>
        <div id="main"><p>Content</p></div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

css/应用程序.css

* {
    margin: 0;
}

html, body {
    background: rgba(179,180,255,1);
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}

.footer {
    background: rgba(22,138,43,1);
}

#loginform {
    width: 240px;
    height: 165px;
    background: rgba(207,207,255, 1);
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
    font-family: 'Londrina Solid', cursive;
}

#registerform {
    width: 240px;
    height: 200px;
    background: rgba(207,207,255, 1);
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: 'Londrina Solid', cursive;
}

#loginuser, #loginpass, #reguser, #regpass, #regemail {
    float: right;
}

#submitbutton, #registerbutton {
    text-align: center;
}

.textaligncenter {
    text-align: center;
}

header {
    font-family: 'Londrina Solid', cursive;
    background: rgba(179,180,255,1);
    height: 90px;
}

#main {
    background: rgba(207,207,255, 1);
}

我尝试添加float: right到主 div，由于某种原因它浮动它正确，但进入页脚 div。我希望主 div（带有“内容”）很好地定位在登录和注册 div 的右侧。

我将它用于我的粘性页脚：

http://ryanfait.com/sticky-footer/

更新

根据以下建议，页面现在如下所示：

在此处输入图像描述

更新

我将 div 放置在我想要的位置，但是当我添加一堆换行符来扩展主 div 时……它延伸到了stickyfooter……这不应该发生……

这是我所做的更改：

#main {
    background: rgba(207,207,255, 1);
    float: left;

}

#loginregcss {
    float: left;
}

#content {
    float: left;
}

这是我的html：

<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
    <script src="reqscripts/jquery.js" type="text/javascript"></script>
    <script src="js/application.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/application.css">
    <link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>ONE DAY ONLY</h1>
            <p>THE BIZZ()</p>
        </header>
        <div id="loginregcss">
            <div id="login"></div>
            <div id="register"></div>
        </div>
        <div id="content">
            <div id="main"><p>Content</p></div>
        </div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

这是它的样子：

在此处输入图像描述

4

3 回答 3

0

试试这个：

<body>
    <div class="wrapper">    
        <div id="left">
            <div id="login"></div>
            <div id="register"></div>
        </div>
        <div id="main"><p>Content</p></div>
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>


#left{
 width: 250px;
 float: left;
}

#main{
  width: 700px;
  margin-left: 50px;
  float: left;   
}

要使页脚始终位于底部：

.push{
 clear: both;
}
于 2013-06-23T13:31:44.057 回答
0

试试这个步骤：将登录和注册都移动到这样的 div：

        <div class="leftBar">
           <div id="login"></div>
           <div id="register"></div>
        </div>

并将左浮动添加到类 leftBar 和 main。给这个leftBar添加一点margin-right。完整的代码在这里： 

<title>ONE DAY ONLY</title>
<body>
    <div class="wrapper">
        <header>
            <h1>ONE DAY ONLY</h1>
            <p>THE BIZZ()</p>
        </header>
    <div class="row">
        <div class="leftBar">
           <div id="login"></div>
           <div id="register"></div>
        </div>
        <div id="main"><p>Content</p></div>
        <div class="push"></div>
        </div>
    </div>
    <div class="footer"></div>

这里是 CSS： 

* {
    margin: 0;
}

html, body {
    background: rgba(179,180,255,1);
    height: 100%;
}

.wrapper {
    min-height: 600px;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
}

.footer {
    background: rgba(22,138,43,1);
    width:100%;
}
.leftBar{
    float:left ;
    width:28%;
    margin-right:10px;
}
#login {
    width: 240px;
    height: 165px;
    background: rgba(207,207,255, 1);
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
    font-family: 'Londrina Solid', cursive;
}
#register {
    width: 240px;
    height: 200px;
    background: rgba(207,207,255, 1);
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: 'Londrina Solid', cursive;
}

#loginuser, #loginpass, #reguser, #regpass, #regemail {
    float: right;
}

#submitbutton, #registerbutton {
    text-align: center;
}

.textaligncenter {
    text-align: center;
}

header {
    font-family: 'Londrina Solid', cursive;
    background: rgba(179,180,255,1);
    height: 90px;
}
.row{
    width:100%;
}
#main {
    background: rgba(207,207,255, 1);
    float:left;
    width:60%;
    min-height:300px;
}

看到这个链接

于 2013-06-23T13:56:00.717 回答
0

谢谢你们的帮助......我需要clear: both;和.footer-.push正如这里所建议的 - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

于 2013-06-23T14:09:37.520 回答