2011-09-22 10 views
0

현재 전체 화면의 너비가 100 % 인 div를 만들려고합니다. 그리고 코드를 작성하여 그것을했다 :content outgrows div 100 %

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 

<head> 
    <title>100% width</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <style type="text/css"> 
     html,body { 
      padding:0px; 
      margin:0px; 
      width:100%; 
     } 
    </style> 

</head> 

<body> 

    <div style="background-color:yellow;"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
    </div> 

</body> 

</html> 

은 일반 줌 설정에서 잘 작동하지만 난 (파이어 폭스 6.0.2)에서 최대 줌을 할 때 DIV 안에있는 문자는 노란색 상자를 빨리 성장. 노란색 상자가 창 끝까지 확장되는 방법이 있습니까?

감사합니다.

+0

를 사용하여 DIV 국경을지나가는 내용을 숨기는 시도 할 수 있을까? – Ben

+0

div에 css 만 넣고 html과 body를 제거하면 어떻게됩니까? – cgatian

답변

0

당신은 함께 포장 정말 긴 단어를 강제 할 수 있습니다 : 당신의 DIV 스타일

word-wrap: break-word; 

.

최대 확대/축소시 어떤 일이 발생합니까?

+0

아니 겠지. 내가 달성하고자하는 것은 http://news.yahoo.com/과 같은 것입니다. 최대 레벨까지 확대하거나 축소해도 모든 것이 완전히 동일하게 보입니다. 요소가 원래 위치에서 벗어나지 않습니다. http://news.google.com/과 대조적으로 최대 확대시 "more"텍스트가 "Sign in"과 겹칩니다. 이것이 어떻게 달성 될 수 있는지에 대한 아이디어가 있습니까? –

+0

인내심과 실험으로 성취 할 수 있습니다. 죄송 합니다만별로 도움이되지 않으며 실제로 코드와 디자인이 어떻게 작동하는지에 따라 다릅니다. 구글 어스 자체가 붕괴되는 이유는 절대적인 위치를 사용하고 막대의 너비가 최대 줌에서 브라우저 너비로 줄어들 기 때문이며 야후는 사이트의 나머지 부분과 적절하게 조절됩니다. – Ben

0

옵션 1 노란색 상자 안에 텍스트를 유지하려면이 CSS 스타일을 추가하십시오.

div {word-wrap: break-word;} 

텍스트가 계속되지 않고 다음 줄로 이동합니다.

옵션 2 또는 당신이 정말 중요합니까 CSS 스타일

div {overflow:hidden;} 
+0

벤이 저를 때린 것 같습니다 옵션 1! – TryHarder