ウェブサイトが応答しません

-1

私は現時点でヘッダー、垂直ナビ、コンテンツボックスを備えたシンプルなウェブサイトを構築していますが、私はちょっとしたことで失敗しています。 HTML構造ウェブサイトが応答しません

<html> 
    <head> 
     <title>Website</title> 
     <link href="style.css" type="text/css" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="header"></div> 
      <div class="nav_content_container"> 
       <div class="nav"></div> 
       <div class="content"></div> 
       <div class="floatkiller"></div> 
      </div> 
     </div> 
    </body> 
</html>

を構築し、それにいくつかのCSSを与えた後

body { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: lightgray; 
} 

.container { 
    height: 100%; 
    width: 77%; 
    margin: 0px auto; 
    background-color: white; 
    border: 3px solid black; 
} 

.header { 
    height: 20%; 
    width: 100%; 
    background-color: yellowgreen; 
    border-bottom: 3px solid black; 
} 

.nav_content_container { 
    height: 80%; 
    width: 100%; 
    background-color: azure; 
} 

.nav { 
    height: 100%; 
    width: 20%; 
    float: left; 
    background-color: palevioletred; 
    border-right: 3px solid black; 
} 

.content { 
    height: 100%; 
    width: 80%; 
    float: left; 
    background-color: cornflowerblue; 
} 

.floatkiller { 
    float: none; 
    clear: both; 
}

私のウェブサイトresponsivをbeeingてに失敗しているか、正確には、自分のサイトのGETは、高さが100％以上だと、私のcontentボックス滴nav_content_containerのうち私は国境を与えていない場合、すべてが問題ありませんが、国境を適用した後、私のウェブサイトは壊れています。なぜ国境がすべてを壊しているのですか？

出典

2017-06-04 Leonzen

-1

国境を与えるのはpxです。それらを%に変更します。それは修正されます。

出典

2017-06-04 17:26:07 Aman

<head>タグに<meta name="viewport" content="width=device-width , initial-scale=1">を追加する必要があります。、あなたはブートストラップを使用している場合は、あなたがする必要がある唯一のものは、col-lg-xのようなクラスを追加することで、

@media screen (max-width: 1366px) 
{ 
    /* element that changes on specific screen resouliton*/ 
    /* h1 { color: red; } AS AN EXAMPLE */ 
}

しかし：あなたはまた、このような特定の解像度で @media queryように要素の変化を、使用する必要があります col-md-x col-xs-x（「x」は1〜12の数字です）、これらのクラスがあなたのために機能します。

ここでそれらについて読む：http://getbootstrap.com/css/#grid-options

出典

2017-06-04 17:52:21

ウェブサイトが応答しません

答えて

関連する問題