웹 사이트 페이지를 브라우저 창에 맞게 조정하려면 어떻게합니까?

수업을 위해 포트폴리오 페이지를 작성 중입니다. 브라우저 크기를 조정할 때 브라우저와 조정할 웹 페이지를 가져 오려고합니다. 주로 머리글에있는 내비게이션 링크. 또한 화면이 가득 차면 내비게이션 링크가 오른쪽 상단에 있습니다. 그러나 내가 창문을 복원 할 때 그것은 중심에있다. 나는 무엇을해야합니까? 어떤 도움을 주시면 감사하겠습니다. 여기 내 코드가있다. 그게 도움이된다면.웹 사이트 페이지를 브라우저 창에 맞게 조정하려면 어떻게합니까?

#header, 
#main, 
#footer{ 

display:block; 
position:relative; 
float:left; 
} 
#header, 
#footer{ 
width:1100px; 
height:80px; 
} 
#header{ 
margin-bottom:2px; 
} 
#footer{ 
margin-top:2px; 
text-align:right; 
border:2px; 
} 
#main{ 
width:650px; 
height:200px; 
margin-left:200px; 
margin-right:200px; 
margin-top:200px; 
} 
#leftcol{ 
float:left; 
} 
#nav{ 
border:2px solid #F00; 
border-width:1px 0; 
list-style:none; 
margin:0; 
padding:0; 
text-align:center; 
} 
#nav li{ 
display:inline; 
} 
#nav a{ 
display:inline-block; 
padding:10px; 
} 


<html> 

    <head> 
     <title></title> 
     <link href="styles.css" rel="stylesheet" type="text/css"> 
     <style type="text/css"> 
      .auto-style1 { 
       text-align: left; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="auto-style1"> 
      <div id="header">Header 

<h1>Creative Minds Inc.</h1> 

      </div> 
      <div id="nav">Navigation 
       <ul> 
        <li><a href="homepage.html">Homepage</a> 
        </li> 
        <li><a href="#">Tips and Trick</a> 
        </li> 
        </li><a href="aboutme.html">About me</a> 
        </li> 
        <li><a href="#">Get in Touch</a> 
        </li> 
       </ul> 
      </div> 
      <div id="main">Main 

<h2>A passion for design and a creative mind.</h2> 


<h3>Design, Develop, Dream</h3> 

      </div> 
      <div id="sidebar">Navigation</div> 
      <div id="footer">Footer 

<h3>Creative Minds Inc. Jonathan Mourning</h3> 

      </div> 
     </div> 
    </body> 

</html>

출처

2013-09-03 JonMo

귀하의 CSS 코드는 불행히도 HTML을 적용하지 않아도 쓸모가 없습니다. 하지만 한 가지 팁 : 일반적으로 자바 스크립트가 필요하지 않습니다. 대신에 상대 크기를 사용하십시오. 너비 : 90 % – dwarduk

방금 편집하여 내 html을 넣었습니다. 이것을 봐주세요. – JonMo

표준 resize DOM 이벤트를 사용할 수 있습니다. 그런 다음

window.onresize = function(event) { 
    ... 
}

에서 엘레 넷 위치와 크기를 적절하게 조정할 수 있습니다.

그러나 일반적으로 고정 된 크기는 사용하지 말고 DOM 요소의 백분율 값을 지정하여 모든 화면 크기 및 비율에서 자동으로 크기를 조정할 수 있습니다. 페이지가 세로 방향이있는 경우 예를 들어, 100%에 width을 변경하고 #main 요소가 항상 화면 중앙 정렬이 : 여기

#main{ 
width:650px; /*or 70% */ 
height:200px; 
margin-left:auto; 
margin-right:auto; 
text-align:center; 
margin-top:200px; 
}

하면 코드 예입니다 : 여기 http://jsfiddle.net/TZGXf/4/ 것은 전체 화면 : http://jsfiddle.net/TZGXf/4/embedded/result/

출처

2013-09-03 01:49:12

난 그냥 내 HTML을 넣어. 이것을 봐주세요. – JonMo

width: 1000px;과 같은 너비를 사용하는 대신 width: 100%;과 같은 백분율 값을 사용하십시오. 그러나 예상치 못한 문제가 발생할 수 있으므로주의하십시오.

출처

2013-09-03 01:52:03 Tyler

왜 대신 백분율을 사용합니까? – JonMo

픽셀을 백분율로 변경했는데 제대로 작동 했으므로 조금만 배치해야했습니다. 그래도 고마워. 매우 감사드립니다. – JonMo

웹 사이트 페이지를 브라우저 창에 맞게 조정하려면 어떻게합니까?

답변

관련 문제