身体外的额外底部空间

时间：2016-11-28 10:27:03

标签： css 

body{
    border: 3px red solid;
    background-color: green !important;
}

为了节省调试，我按上面设置了主体。

结果显示在屏幕截图中：

enter image description here

在底部看到额外的绿色空间？我似乎无法摆脱它。

身体的边缘当然都是0而overflow: hidden也无济于事。

此外，身体内的所有元素共享相同的高度。

好的，所以这个页面的html如下：

<link href="http://news.12reads.cn/style.css" rel="stylesheet"/>
<body class="page page-id-2109 page-template page-template-start page-template-start-php logged-in d2 g2 p2 c2 elegant">
<div id="global" class="global">
    
    <div class="pusher">
               
    		<!-- <section id="title"></section> 隐藏课程学习页的page title -->
    		<!-- 内容区开始 -->
<section id="content" style="background-color: rgb(240, 240, 244); height: 100%; padding-bottom: 698px;">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="unit_wrap ">
                <div id="unit_content" class="unit_content">
                
                <div id="unit" class="unit_title" data-unit="2618">
                	<div class="instructor">
              <a href="http://peixun:8888/members/12reads/" title="12reads"> <img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span><strong>讲师</strong><br>12reads</span></a>
            </div><a href="#" class="print_unit"><i class="icon-printer-1"></i></a><span><i class="icon-clock"></i> 49 分钟</span>                	<br><h1 class="well well-sm" style="font-size: 18px;">管理思维的演变</h1>
                    	
                    </div>
                    <div class="main_unit_content unit_class"><div id="a1"><object pluginspage="http://www.macromedia.com/go/getflashplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" id="ckplayer_a1" name="ckplayer_a1" align="middle" height="400" width="100%"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#FFF"><param name="wmode" value="transparent"><param name="movie" value="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf"><param name="flashvars" value="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&amp;c=0"><embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf" flashvars="f=http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4&amp;c=0" name="ckplayer_a1" id="ckplayer_a1" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="400" width="100%"></object></div>
    <script type="text/javascript" src="http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.js" charset="utf-8"></script>
    <script type="text/javascript">
        var flashvars={
            f:"http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4",
            c:0
        };
        var params={bgcolor:"#FFF",allowFullScreen:true,allowScriptAccess:"always",wmode:"transparent"};
        var video=["http://mov.bn.netease.com/open-movie/nos/mp4/2013/12/02/S9E63A72V_sd.mp4-&gt;video/mp4"];
        CKobject.embed("http://peixun:8888/wp-content/themes/peixun/ckplayer/ckplayer.swf","a1","ckplayer_a1","100%","400",false,flashvars,video,params);
    </script>
</div>                <div class="unit_prevnext"><div class="col-md-3"><a href="#" id="prev_unit" data-unit="2609" class="unit unit_button">上一课时</a></div><div class="col-md-6"></div><div class="col-md-3"></div></div>                </div>
                <input id="hash" name="hash" value="bf905d9c31" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden"><input id="course_id" name="course" value="2605" type="hidden">                <div id="ajaxloader" class="disabled"></div>
                <div class="side_comments"><a id="all_comments_link" data-href="">查看全部</a>
                    <ul class="main_comments">
                        <li class="hide">
                            <div class="note">
                            <img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <a href="http://peixun:8888/members/12reads/" class="unit_comment_author"> 12reads</a>                            <div class="unit_comment_content"></div>
                            <ul class="actions">
                                <li><a class="tip edit_unit_comment" title="" data-original-title="Edit"><i class="icon-pen-alt2"></i></a></li>
                                <li><a class="tip public_unit_comment" title="" data-original-title="Make Public"><i class="icon-fontawesome-webfont-3"></i></a></li>
                                <li><a class="tip private_unit_comment" title="" data-original-title="Make Private"><i class="icon-fontawesome-webfont-4"></i></a></li>
                                <li><a class="tip reply_unit_comment" title="" data-original-title="Reply"><i class="icon-curved-arrow"></i></a></li>
                                <li><a class="tip instructor_reply_unit_comment" title="" data-original-title="Request Instructor reply"><i class="icon-forward-2"></i></a></li>
                                <li><a data-href="#" class="popup_unit_comment" title="Open in Popup" target="_blank"><i class="icon-windows-2"></i></a></li>
                                <li><a class="tip remove_unit_comment" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
                            </ul>
                            </div>
                        </li>
                    </ul>

                    <a class="add-comment">Add a Note</a>
                    <div class="comment-form">
                        <img src="http://peixun:8888/wp-content/uploads/avatars/1/581214182bd15-bpthumb.jpg" class="avatar user-1-avatar avatar-96 photo" alt="12reads的头像" height="96" width="96"> <span>YOU</span>                        <article class="live-edit" data-model="article" data-id="1" data-url="/articles">
                            <div class="new_side_comment" data-editable="true" data-name="content" data-text-options="true" contenteditable="true">
                            添加评论                            </div>
                        </article>
                        <ul class="actions">
                            <li><a class="post_unit_comment tip" title="" data-original-title="发布"><i class="icon-fontawesome-webfont-4"></i></a></li>
                            <li><a class="remove_side_comment tip" title="" data-original-title="Remove"><i class="icon-cross"></i></a></li>
                        </ul>
                    </div>       
                </div>
                </div>
            </div>
            <div class="col-md-3">
            	<div class="course_time">
            		<strong>剩余时间 : <span>0 Days</span></strong>            	</div>
                <div class="progress course_progressbar" data-increase-unit="50" data-value="50.00">
	             <div class="bar animate cssanim stretchRight load" style="width: 50.00%;"><span>50.00%</span></div>
	           </div><div class="course_timeline ">
                <ul><li id="unit2609" class="unit_line  done"><span></span> <a class="unit" data-unit="2609">管理思维导论</a></li><li id="unit2618" class="unit_line  active done"><span></span> <a class="unit" data-unit="2618">管理思维的演变</a></li></ul></div>            	<div class="more_course">
            		<a href="http://peixun:8888/course/%e7%ae%a1%e7%90%86%e6%80%9d%e7%bb%b4/" class="unit_button full button">返回课程</a>
            		<form action="http://peixun:8888/course/%e7%ae%a1%e7%90%86%e6%80%9d%e7%bb%b4/" method="post">
            		<input name="review_course" class="review_course unit_button full button" value="评价课程" type="submit"><input name="submit_course" class="review_course unit_button full button" value="完成课程" type="submit">	
            		<input id="review" name="review" value="e9c8949274" type="hidden"><input name="_wp_http_referer" value="/course-status/" type="hidden">            		</form>
            	</div>
            		
            </div>
        </div>
    </div>
</section>

</div><!-- END PUSHER -->
</div><!-- END MAIN -->
<span class="text-options" style="top: -999px; left: -999px;"><button class="url-button">U</button><span class="input-text"><input name="liveedit-url" type="text"></span><button class="bold-button">B</button><button class="italic-button">I</button><button class="strikethrough-button">ABC</button><button class="unorderedlist-button">L</button></span></body>

2 个答案:

答案 0 :(得分：0)

这是一个简单的常见错误。 body元素在margin属性上的默认值为8px。你要做的是

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

100％的宽度和高度是可选的，我只是总是使用该片段来填充整个屏幕的身体。

答案 1 :(得分：-1)

我测试了你的代码，而不是jsfiddle，我添加了这个：

.page {
      height: 100%;
      margin: 0;
}

html {
  position: relative;
  height: 100%;
}

如果您无法设置html属性，请在.page添加min-height: 100vh。 vh是视口单元，这种情况是水平的。

.page {
      height: 100%;
      margin: 0;
      min-height: 100vh;
}
相关问题
最新问题