我已经尝试了一切来删除我的页脚下的空白,我没有尝试过什么?

时间:2015-06-29 13:29:42

标签: html css

我已经更新了CSS样式表。

我一直在页脚下面遇到一个空白区域,我已经包含了截图。

我已经包含了css重置但仍无法解决问题

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

body{
 background-color:#ebebeb;
 border:1px solid black;
 height:1317px;


}
#header_wrap{
 height:90px;
 background-color:#191919;
Opacity:0.9;
 border-bottom:2.40px solid #11120f;
 width:100%;
}

header{
 width:980px;
 margin: 0 auto;
}

header h1 a{
 display:block;
 float:left;
 height:50px;
 width:175px;
 margin:0px;
 padding:0px;
 margin-top:20px;
 text-indent:-999999px;
 background: url(images/logo.png) no-repeat;
 color:#fff;
 text-decoration:none;
}

nav{
}

nav ul li{
 float:right;
 line-height:0px;
 font-size:16px;
 font-family:Open Sans;
 color:#ffffff;
 font-weight:100;
 border-left:1px solid #303030;
 margin:36px 0px 36px 0px;
 padding: 9px 15px 9px 15px;
}

nav ul li a {
 text-decoration:none;
 color:#ffffff;
}

#home{
border-left:none;
}

#lang{
 border-left:none;
 font-size:13px;
 margin-left:115px;
}

/*#header_border{
height:2px;
background-color:#bfbfbf;
width:100%;
margin:0px;
padding:0px;
}*/

#slider_container{
max-width:100%;
margin:0 auto;
height:678px;
background-color:#c4c4c4;
padding:0px;
}

#slider img{
width:100%;
margin 0 auto;
height:588px;
position:absolute;
top:px;
left:0px;
}

#slider_content{
width:980px;
height:588px;
margin:0 auto;
}

#sl_content{
position:relative;
top:253px;
 margin:0px;
 padding:0px;
 height:84px;
 width:605px;
 background: url(images/slider_header_1.png) no-repeat;
 text-indent:-999999px;
}

#slider_arrow_left{
background-image: url("images/arrow_slider_left.png"); 
background-repeat:no-repeat;
float:left;
position:absolute;
top:367px;
left:20px;
width:42px;
height:42px;
}

#slider_arrow_right{
background-image: url("images/arrow_slider_right.png"); 
background-repeat:no-repeat;
float:right;
position:absolute;
top:367px;
right:20px;
width:42px;
height:42px;
}

#slider_arrow_left:hover{
background-image: url("images/arrow_slider_left_hover.png"); 
background-repeat:no-repeat;
}

#slider_arrow_right:hover{
background-image: url("images/arrow_slider_right_hover.png"); 
background-repeat:no-repeat;
}

#main_container{
width:980px;
margin:0 auto;
position:relative;
bottom: 52px;

 border:1px solid black;

}

#book{
width:980px;
height:100px;
margin:0 auto;
background-color:#fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#book_head{
width:215px;
float:left;
margin:0px;

height:100px;
   -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
background-color:#f3f3f3;
border-right:1px solid #e0e0e0;
}

/*width:215px;
background-color:#f3f3f3;
height:99px;
border:1px solid black;
position:relative;*/

#book_head h1{
font-family:Open sans;
font-weight:bold;
font-size:18px;
margin-bottom:-10px;
color:#373535;
}

#book_head p{
font-family:Open sans;
font-size:13px;
color:#939292;
width:150px;
}

#book_head span{
margin:0px;
position:relative;
top:21px;
left:22px;
}

#book_input div{
float:right;
margin-top:10px;
position:relative;
right:12px;
}

input[type="text"]{
margin-left:11px; 
height:36px;
-webkit-border-radius: 5px;
-moz-border-bottom-radius: 5px;
border:2px solid #d9d7d7;
}    

input[placeholder="Select a room type"]{
width:175px;
text-indent:14px;
background-image: url("images/input_arrow_1.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}

input[placeholder="1"]{
width:53px;
text-indent:14px;
background-image: url("images/input_arrow_2.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}

input[placeholder="DD/MM/YYYY"]{
text-indent:14px;
width:144px;
background-image: url("images/input_calender_1.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}

input[placeholder="0"]{
width:53px;
text-indent:14px; 
background-image: url("images/input_arrow_3.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}

input[type="submit"]{
width:94px;
height:36px;
margin-top:31px;
margin-left:10px;
background-color:#32a2e3;
border:1px solid #32a2e3;
font-family:Open sans;
font-weight:bold;
color:#fff;
border-bottom:1px solid #2b8ac1;
}

#one{
border:1px solid black;
}

.input_label{
position:relative;
left:11px;
top:4px;
font-family:Open sans;
font-size:13px;
}

#content{
width:980px;
margin:0 auto;
margin-top:44px;
margin-bottom:0px;
}

.thumb{
width:298px;
height:149px;
background-color:#fcfdff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #d8d9db;
}

 .col{
float:left;
margin:0px;
margin-right:43px;
width:298px;
height:200px;



 }



#col_ed{
margin-right:0px;


}


.thumb_h{
font-family:Open sans;
font-size:20px;
font-weight:300;

}

.thumb_det{
font-family:Open sans;
font-size:13px;
margin-top:10px;
width:270px;
}

.bold{
font-weight:bold;
}


#footer_wrap{
clear:both;
background-color:#ffffff;
width:100%;
height:70px;
margin:0px;
 border:1px solid black;
 position:absolute;
 top:1317px;

}

#footer{


margin:0 auto;

width:980px;
padding-top:30px;


}

#footer {

}

.footer_col{

float:left;
width:324.6px;
height:70px;
font-family:Open sans;
font-size:14px;


}
.footer_col p {
float:left;
color:#9b9a9a;
}

#lastone p{

padding-left:14px;


}
#lastone a{
text-decoration:none;
color:#9b9a9a;
}

#mid{
padding-right:0px;
text-indent:-999999px;


}

#mid p{
padding-right:5px;

}

#mid span{
display:block;
position:relative;
right:-60px;
bottom:10px;

}

#f{
background: url(images/facebook.png)no-repeat;
width:30px;
height:30px;
}

#t{
background: url(images/twitter.png)no-repeat;
width:30px;
height:30px;
}
#v{
background: url(images/vimeo.png)no-repeat;
width:30px;
height:30px;
}

#y{
background: url(images/youtube.png)no-repeat;
width:30px;
height:30px;
}
#p{
background: url(images/pinterest.png)no-repeat;
width:30px;
height:30px;
}

HTML代码就在这里 这是我的HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--[if IE]>
    <script type="text/javascript">
      (function(){
      var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
      for(var i = 0; i < html5elmeents.length; i++){
      document.createElement(html5elmeents[i]);
      }
      }
      )();
    </script>
    <![endif]-->
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="slider_container">
      <div id="header_wrap">
        <header>
          <h1><a href="#">UFULU GARDENS</a></h1>
          <nav>
            <ul>
              <div>
                <li id="lang"><a href="#">EN  <img src="images/lang_arrow.png"/></a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Activities</a></li>
                <li><a href="#">Reservation</a></li>
                <li><a href="#">Rooms & Suites</a></li>
                <li id="home"><a href="#">Hotel</a></li>
              </div>
            </ul>
          </nav>
        </header>
      </div>
      <div id="slider" class="fadein">
        <img src="images/slider1.jpg"/> 
        <!--<img  src="images/slider2.jpg"/>
          <img src="images/slider3.jpg"/> -->
      </div>
      <div id="slider_arrows">
        <a  href="#"id="slider_arrow_left"> </a>
        <a href="#"id="slider_arrow_right"> </a>
      </div>
      <div id="slider_content">
        <div id="sl_content">
          <h1>HEADER</h1>
        </div>
      </div>
    </div>
    <div id="main_container">
      <div id="book">
        <div id="book_head">
          <span>
            <h1>Book a room online</h1>
            <br/>
            <p>Lorem ispum solor sid
          </span>
          ahmed loresin vane.</p>  
        </div>
        <div id="book_input">
          <div >
            <p><input type="submit" value="Book now"</p>
          </div>
          <div>
            <p class="input_label">Children:</p>
            <br/>
            <p><input type="text" placeholder="0"/></p>
          </div>
          <div>
            <p class="input_label">Adults:</p>
            <br/>
            <p><input type="text" placeholder="1"  /></p>
          </div>
          <div>
            <p class="input_label">Check-out-date:</p>
            <br/>
            <p><input type="text" placeholder="DD/MM/YYYY"></p>
          </div>
          <div>
            <p class="input_label">Check-in-date:</p>
            <br/>
            <p><input type="text" placeholder="DD/MM/YYYY"/></p>
          </div>
          <div>
            <p class="input_label">Type of room:</p>
            <br/>
            <p><input type="text" placeholder="Select a room type"/></p>
          </div>
        </div>
      </div>
      <div id="content">
        <!--149 296-->
        <div class="col">
          <div class="thumb"> </div>
          <br/> 
          <p class="thumb_h">Single room <span class="bold"> 110 $ </span> </p>
          <p class="thumb_det">Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. 
          </p>
        </div>
        <div class="col">
          <div class="thumb"> </div>
          <br/> 
          <p class="thumb_h">Double room <span class="bold">180 $</span></p>
          <p class="thumb_det">Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. 
          </p>
        </div>
        <div class="col" id="col_ed">
          <div  class="thumb"></div>
          <br/> 
          <p class="thumb_h">Suite room <span class="bold"> 210 $</span></p>
          <p class="thumb_det">Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna
            aliquam erat volutpat. 
          </p>
        </div>
      </div>
    </div>
    <div id="footer_wrap">
      <div id="footer">
        <div class="footer_col">
          <p>&copy 2012 Paradise Hotel. All Rights Reserved.</p>
        </div>
        <div id="mid" class="footer_col">
          <span>
            <a href="#">
              <p id="f">A</p>
            </a>
            <a href="#">
              <p id="t">A</p>
            </a>
            <a href="#">
              <p id="v">A</p>
            </a>
            <a href="#">
              <p id="y">A</p>
            </a>
            <a href="#">
              <p id="p">A</p>
            </a>
          </span>
        </div>
        <div id="lastone"class="footer_col">
          <p><a href="#">Home</a></p>
          <p> <a href="#">Rooms & Suites</a></p>
          <p><a href="#">Resevation</a></p>
          <p><a href="#">Contact</a></p>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slide.js"></script>
  </body>
</html>

1 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/e8xunfLu/1/

你必须删除:

height: 70px

来自footer_col