화면의 반응 형 사각형 채우기 너비와 높이에서 div를 만드는 방법은 무엇입니까?

Question

web-tiki's responsive square elements을 조정했으며 로그인 화면을 만들고 싶습니다.

로그인 화면에서 헤더를 사용하고 나머지 페이지에 화면의 높이와 너비를 정확하게 채우고 싶습니다. 폭과 높이를 작성 그것은 다음과 같이 보일 것입니다 :

은 지금 코드가없는 부분 [배경 이미지 FILL 폭의 나머지와 HEIGHT] 단지 내 컨트롤의 외부 크기를 조정하기 때문에이를 수행 않습니다.

HTML :

<div id="top"> 
    <h1>My header</h1> 
</div> 

<!-- Fixed main screen --> 
<div id="login-screen" class="bg imgloginscreen"> 
    <div class="content rs"> 
     <div class="float-left">Some text, blabla</div> 
     <div class="float-right"> 
      <form> 
       <input type="text" value="Username"/><br/> 
       <button type="submit">Login </button> 
      </form> 
     </div> 
    </div> 
</div> 

CSS :

/* Responsive square elements stylesheet is adjusted from http://jsfiddle.net/webtiki/MpXYr/3/light/ which was designed by http://web-tiki.com/ */ 

#top { 
    clear: both; 
    margin: 0.25%; 
    width: 99.5%%; 
    padding: 0.1%; 
    background-color: #000; 
    color: #fff; 
} 
.imgloginscreen { 
    background-image: url('http://upload.wikimedia.org/wikipedia/en/3/37/Leaves.JPG'); 
} 
.content { 
    position: absolute; 
    height: 90%; /* = 100% - 2*5% padding */ 
    width: 90%; /* = 100% - 2*5% padding */ 
    padding: 5%; 
} 
/* For responsive images */ 
.content .rs { 
    width: auto; 
    height: auto; 
    max-height: 90%; 
    max-width: 100%; 
} 
.float-left { 
    float: left; 
} 
.float-right { 
    float: right; 
} 
/* Not sure how to make it fill the rest of screen? */ 
#login-screen { 
    float: left; 
    position: relative; 
    height: 99.5%; 
    width: 99.5%; 
    padding-bottom: 50%; 
    margin: 0.25%; 
    overflow: hidden; 
    background-color: #1E1E1E; 
} 

body { 
    font-family: 'Lato',verdana, sans-serif; 
    font-size: 20px; 
    color: #fff; 
    text-align: center; 
    background: #ECECEC; 
    margin: 0; 
} 

나는 누군가가 나가 화면에 들어갈 수 있도록 도와 수 있기를 바랍니다.

감사합니다.

JSFiddle : http://jsfiddle.net/2shygbcy/2/

Answer 1

을 것이라고 기대하고 무엇을 확인 잊지 마세요.

HTML & CSS :

body { 
 
    margin: 0; 
 
    height: 700px; /* adjust according to your screen height */ 
 
    overflow-y: hidden; 
 
} 
 
#header { 
 
    background: #000; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
} 
 
#content { 
 
    height: 100%; 
 
    background: #1E1E1E; 
 
    padding-top: 20px; 
 
    text-align: center; 
 
} 
 
input[type="submit"] { 
 
    margin-top: 10px; 
 
}

<div id="header"> 
 
    <h1>My Header</h1> 
 
</div> 
 
<div id="content"> 
 
    <input type="text" placeholder="username" /> 
 
    <br/> 
 
    <input type="submit" value="Login" /> 
 
</div>

Answer 2

사용 vw and vh Measurements는

*{box-sizing: border-box; padding: 0; margin: 0} 
.imgloginscreen { 
    width: 100wv; 
    height: 100vh; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-image: url('http://upload.wikimedia.org/wikipedia/en/3/37/Leaves.JPG'); 
} 

Answer 3

box-sizing - CSS 이봐,이 당신은 내가 더 일반적인 접근 방식을 시도하는 것이 좋습니다

 

    http://jsfiddle.net/2shygbcy/1/