1

Divコンテナーを使用してレイアウトを取得しようとしていますが、Divがそのように動作している理由がわかりません。私は彼らが互いに並んでいると思っていましたが、それは起こっていません。また、背景色が一部のDivを適切に塗りつぶしていないため、他のDivのプロパティを継承していると彼は信じています。この簡単な例で、どこが間違っているのか誰かに教えてもらえますか？ありがとうございました。

HTML

<?php
// Inialize session
session_start();
// Check, if username session is NOT set then this page will jump to login page
require_once 'check_login.php';

?>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link href="style_wide.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container"> 

        <div id="toolbar_top"> </div> <!--end div toolbar-->


        <div id ="content"> 
            <div id = "map_canvas"><div> <!--end div map_canvas-->
            <div id="form_get_date">   <div> <!--end div form_get_date-->       
        </div> <!--end div content-->  


        <div id ="footer"> </div> <!--end div footer-->

    </div> <!--end div container-->
</body>
</html>

CSS

 html { height: 100%; }
body, html { min-height: 100%; height: 100%;margin : 0;
    padding : 0; }



body {
    width:100%;
    background : #F5F5FF; 
    }

#container {
    min-height: 100%;
    width : 100%;
    border-style: solid;
    border-width:1px;
    background  #FFFFCC;
    -moz-box-shadow: 10px 10px 5px #888888; /* shadow border */
    box-shadow: 10px 10px 5px #888888;
    }



#toolbar_top {
    border: solid 1px;
    height : 25px;
    background : red;
    }    



#content {
    min-height: 100%; /* need this */
    height: 100%;   /* and this, to get content div to stretch to bottom of page in Firefox */
    margin-bottom : 25px;background : #FFEBCC;
    color : #666;
    border: solid 1px;
    background:blue;
    }


#footer {
    clear:both;
    height:25px;
    position:absolute;
    bottom: 0;
    background : red;
    border: solid 1px;
    } 



#map_canvas {
    margin: 20;
    padding: 0;
    background:white;
    height: 400px;
    border: 1px solid;
    }

#form_get_date  {
    height:100px;
    border:solid;
    }
4

1 に答える 1

5

これらのDIVを閉じたいということでしょうか

 <div id ="content"> 
    <div id = "map_canvas"><div> <!--end div map_canvas-->
    <div id="form_get_date">   <div> <!--end div form_get_date-->       
 </div> <!--end div content-->

彼らが次のように見えるように：

 <div id ="content"> 
        <div id = "map_canvas"></div> <!--end div map_canvas-->
        <div id="form_get_date">   </div> <!--end div form_get_date-->       
 </div> <!--end div content-->
于 2012-10-07T18:55:16.513 に答える