Question

我正在使用bootstrap构建响应式登录页面。到目前为止，我有this page。我遇到了一个问题。容器的整个高度不会达到背景图像的整个高度。为了维护完整的响应式登陆页面，我使用真实图像作为背景图像。

问题是如何使容器获得图像的高度，以便将所有设备的百分比保持为横向视图，如this example

这是源代码 CSS

html{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;

}


body{
    zoom: 1;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 100%;
}
}



.center{
    text-align: center;
    margin: 0 auto;
}


.container{
    background: url('../images/bgm.jpg') no-repeat scroll contain;
    background-size:  100%; 
    height: 100% !important;
    width: 100% !important;
}


.bgm{  
    z-index: -9999;
    top: 0;1
    position: absolute;
    width: 100%;
    right: 0;
}


    #logo{
        background-color: red;
    }

    #dail{
        background-color: blue;
    }

    #header{
        height: 15%;
    }

    #text-h{
        height: 12%;
    }
    #para{
        height: 7%;
    }
    #header{
        height: 15%;
    }


    .red{
        background-color: red;
    }

    .green{
        background-color: green;
    }

HTML

<html lang="en"><head>


    <meta charset="utf-8">

    <title>דירות קו ראשון לים בפנמה</title>
    <meta name="description" content="דירות קו ראשון לים בפנמה">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.css">

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
<!--    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanshebrew.css"> -->



    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
    <!--    <script src="js/jquery.backstretch.js"> -->

    <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body cz-shortcut-listen="true">


    <div class="container">

        <img src="images/bgm.jpg" class="bgm">

        <div class="row" id="header">
            <div class="col-lg-4 col-md-6 col-xs-6  center" id="logo">
asdasdasd               
            </div>  
            <div class="col-lg-4 col-md-6 col-xs-6 center" id="dail">
asdasdasd
            </div>
        </div>
        <div class="row" id="text-h">
            <div class="col-lg-4 col-md-8 col-xs-8 col-offset-4 center red" id="h1">
asdasdasd               
            </div>  

        </div>

        <div class="row" id="para">

            <div class="col-lg-4 col-md-12 col-xs-12 center green" id="par">
asdasdasd               
            </div>  
        </div>

        <div class="row">
            <div class="col-lg-4 col-md-12 center main red">

        <form method="POST" d id="form" action="form.php">

                    <input id="name" maxlength="40" name="name" size="20" type="text" placeholder="שםי" required>



                    <input id="phone" maxlength="40" name="phone" size="20" type="text"  placeholder="טלפון" required>

                    <input id="email" maxlength="80" name="email" size="20" type="email" placeholder="אימייל" required>

                </form>
            </div>  
        </div>
        </div>

    </body>
</html>

tnx

Answer 1

使用

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

而不是100％。

css全高度的容器作为背景图像的全高

1 个答案: