사파리 : 높이 : 100 % 실행되지 않음

Question

나는 브라우저 폭의 40 %와 100 %를 측정하는 signup-login-forms div입니다. 그 div의 내부에는 두 가지 형태가 서로 옆에 앉아 있습니다. 두 양식 모두 signup-login-forms div의 100 % 높이를 원합니다. FireFox와 Chrome에서는 작동하지만 Safari에서는 작동하지 않습니다 (v 7.0.6 사용). 양식의 높이는 양식의 내용만큼 높습니다. 다음은 시도 된 솔루션 목록과 소스 코드입니다. 당신이 제공 할 수있는 도움에 미리 감사드립니다!

시도 : 1. 최소 높이로 변경 : 100 %. 2. 높이 설정 : 자동. 3. 상자 크기 조정 제거 : 테두리 상자.

<div id="signup-login-forms"> 
      <form id="signup-form" name="signup-form" method="POST" action="#"> 
       <header> 
        <h2>Create account</h2> 
       </header> 
       <fieldset> 
        <input type="email" id="userEmail" name="userEmail" required="required" placeholder="email"> 
        <input type="email" id="confirmUserEmail" name="confirmUserEmail" required="required" placeholder=" confirm email"> 
        <input type="password" id="confirmPassword" name="confirmPassword" required="required" placeholder="create password"> 
        <small> 
         <p>By signing up, you agree to our <a href="---">terms and conditions</a>.</p> 
        </small> 
        <button class="form-button" id="signup-button" type="submit" formmethod="#" formaction="#">Sign up</button> 
       </fieldset> 
      </form> 
      <form id="login-form" name="login-form" method="POST" action="#"> 
       <header> 
        <h2>Log-in</h2> 
       </header> 
       <fieldset> 
        <input type="email" id="userEmail" name="userEmail" required="required" placeholder="email"> 
        <input type="password" id="password" name="password" required="required" placeholder="password"> 
        <div id="checkbox"> 
         <input type="checkbox" name="loginPreference" id="loginPreference"><label>Keep me logged in</label> 
        </div> 
        <button class="form-button" id="login-button" type="submit" formmethod="#" formaction="#">Log-in</button> 
       </fieldset> 
      </form> 
     </div>  

그리고 CSS : 여기

내 HTML입니다!

#signup-login-forms { 
width: 100%; 
height: 40vh; 
background-color: #161618; 
margin: 4em 0 0 0; 
text-align: center; 
} 

#signup-login-forms form { 
height: 100%; 
width: 50%; 
text-align: center; 
} 

#signup-form { 
float: left; 
border-right: 1px solid rgb(53, 53, 53); 
box-sizing: border-box; 
} 

#login-form { 
float: right; 
box-sizing: border-box; 
} 

#signup-login-forms form header { 
width: 100%; 
padding: 5% 0 0 0; 
text-align: center; 
} 

#signup-login-forms header h2 { 
color: #e74c3c; 
font-weight: normal; 
font-size: 2em; 
display: inline; 
} 


#signup-login-forms fieldset { 
width: 100%; 
} 

Answer 1

# signup-login-forms 양식에서 height:100%을 height:inherit으로 변경하면 문제가 해결됩니다. 이것은 나를 #signup-login-forms 높이를 vh로 유지하도록합니다.

Answer 2

그 속성을 만드는 시도가 좋은하지 비록 중요한 또는 인라인

또는 는 특이성 을 증가 스타일에 CSS에서 ID를 사용하는 아이디어가 있지만 시도해 볼 수 있습니다.

컨텐츠 아래 확인하시기 바랍니다

Answer 3

단위 VH가 % 또는 픽셀 중 하나에 사파리 변화를 작동하지 않습니다, 그것은 완벽하게

Answer 4

작동합니다, 당신은 %에서 div 태그에 필요한 높이를 설정해야

# signup-login-forms {너비 : 100 %; 높이 : 100 %; 배경색 : # 161618; margin : 4em 0 0 0; 텍스트 정렬 : 가운데; }