여백 하단은 오페라와 사파리에서 작동하고 싶지 않다.

나는 웹 디자인에서 새로운데, 나는이 코드를 HTML/CSS에서 해왔다. 모든 브라우저. 크롬, 인터넷 익스플로러 11, 파이어 폭스에서 테스트했는데 작동하지만 Opera와 Safari에서는 작동하지 않습니다. 나는 내가 멍청이이거나 브라우저 때문에 실수한지 모르겠다. 여백 하단은 오페라와 사파리에서 작동하고 싶지 않다.

이

내 코드의 HTML입니다 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>CALCULADORA DE CREDITOS - CECyT No. 1 "GONZALO VAZQUEZ VELA" DEL IPN</title> 
    <link rel="stylesheet" media="screen" href="prueba.css"> 
</head> 

<body> 
    <div id="wrapper"> 
     Hellow ,i'm a DIV! 
    </div> 
</body> 
</html>

그리고 이것은 내 CSS 'prueba.css'입니다 :

*{margin:0; 
padding:0;} 


html,body{height:100%;} 


body{margin:4%;} 

#wrapper{ 
margin:0 auto 0 auto; 
background-color:gray; 
width:60%; 
height:100%; 
}

출처

2014-03-03 EduardoRobles

1. 여백이 작동하지 않는 요소는 무엇입니까? 2. 코드에서 특정 마진을 찾을 수 없습니다. – David

본문의 여백 바닥에 정확히 있습니다. – EduardoRobles

'html, body {height : 100 %}'를 사용할 필요가 없습니다. 몸이 전폭과 신장 + 4 % (108 %)가 되려고하기 때문에 문제를 일으키는 원인이 될 가능성이 큽니다. JSFiddle : http://jsfiddle.net/yFvLT/ – David

제거 이러한 부분 :

html,body{height:100%;} 
body{margin:4%;}

요소를 구체적으로 지정 크기를 선택한 경우 선택한 요소에서 '위치 : 고정'을 사용할 때만 비율을 사용합니다.

대신 요소 자체에 여백을 설정하고 요소를 백분율로 설정하는 것은 요소에 "위치 : 고정"이있을 때만 작동합니다.

JSFiddle Demo

출처

2014-03-03 23:52:36 Paradoxis

여백 하단은 오페라와 사파리에서 작동하고 싶지 않다.

답변

관련 문제