HTML, 브라우저의 크기가 바뀔 때 페이지에서 요소 이동을 멈 춥니 다.

브라우저가 크기가 조절되면 요소 이동을 중지하려고합니다. 예를 들어 크롬 창을 작게 만들면 모든 것이 다른 위치의 왼쪽으로 이동하기 시작합니다. 메뉴 막대와 겹치는 텍스트 포함, 창 크기를 조정할 때도 같은 위치에 유지할 수 있습니까?HTML, 브라우저의 크기가 바뀔 때 페이지에서 요소 이동을 멈 춥니 다.

이 내 HTML 코드의 시작 :

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="css/alternativeCSS2.css" 
title="bigsheet"/> 
    <link rel="alternate stylesheet" type="text/css" 
href="css/alternativeCSS2.css" title="mediumsheet"/> 
    <link rel="alternate stylesheet" type="text/css" 
href="css/alternativeCSS3.css" title="smallsheet"/> 
    <link rel="alternate stylesheet" type="text/css" 
href="css/alternativeCSS4.css" title="specialsheet"/> 
    <script type="text/javascript" src="script/CTEC1800-Stylesheets(4).js" > 
</script> 
    <title>Historical Pioneers</title> 
</head> 
<body onload="chooseStyleBySize()"> 
    <div id="layout"> 
    <div id="swapping"> 
     <p> 
      <select onchange="setActiveStyle(this.value)"> 
       <option value="bigsheet">For big pages</option> 
       <option value="mediumsheet">For medium-sized pages</option> 
       <option value="smallsheet">For small pages</option> 
       <option value="specialsheet">For special pages</option> 
      </select> 
     </p> 
    </div> 
    <div id="header"> 
     <h1 id="logo"><img src="img/logo.png" width="200px" height="70px" 
alt="logo" /></h1> 
    </div> 
    </div> 
    <div id="nav" class="box"> 
    <ul class="nav"> 
     <li id="active"><a href="home.html">Home</a></li> 
     <li><a href="Hitlers Biography.html">Adolf Hitler's Biography</a> 
</li> 
     <li><a href="Winston Churchill.html">Winston Churchill's 
Biography</a></li> 
     <li><a href="About Us.html">About Us</a></li> 
     <li><a href="Contact Us.html">Contact</a></li> 
    </ul> 
    </div> 
    <div id="container" class="box"> 
    <div id="intro"> 
     <div id="intro-in"> 
      <h1>60 million men fought in 'The War to End All Wars', It ended 
nothing..</h1> 
      <p class="intro"> 
       "Putting history in it's place". For many years we have been 
collecting, researching and interpreting historical information from the 
World War 2, How the key figures including Adolf Hitler and Franklin D. 
Roosevelt influenced this great war between 1939 to 1945. 
       Some information that was not yet looked into properly that 
was very well important and how it all began in the first place. 
      </p> 
     </div> 
     <div id="hr"> 
      <hr />

이 내 CSS 코드 :

/*--------------------- Main Body --------------------- */ 

* { 
margin: 0; 
padding: 0; 
} 
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, 
legend, dl, dt, dd, blockquote, applet, object { 
border: 0; 
} 
p { 
margin: 15px 0; 
} 
body { 
padding: 0; 
background-color: #ededed; 
background: #fff url("../img/bg1.jpg") repeat-y; 
font: 0.8em/1.5 "arial", sans-serif; 
color: #354146; 
text-align: center; 
width: 100%; 
} 

#layout { 
} 

#header{ 
text-align: left; 
margin-left: 30px; 
} 

#swapping{ 
text-align: left; 
margin-left: 45px; 
} 

#container{ 
margin-left: 40%; 
clear: both; 
width: 100%; 

} 

/*--------------------- Horizontal Navigation Menu --------------------- */ 

#nav { 
margin: 0; 
height: 100%; 
margin-top: 20px; 
} 
#nav ul { 
list-style-type: none; 
width: 14%; 
min-width:265px; 
height: 100%; 

clear: both;

text overflowing to the menu bar

출처

2017-04-09 DrExpresso

예, 가능합니다. 'body' 또는 페이지 래퍼에 고정 폭을 줄 수 있지만 웹 사이트를 모바일 친화적으로 만드는 것을 고려해야합니다. – Alex

다른 뷰포트의 요소를 제어하려면 ** Responsive ** web design을 고려해야합니다. – fadifannoun

당신이 할 수있는 당신의 HTML 본문의 폭을 고정하여, 그러나 당신이 반응적인 웹 사이트를 만들고 싶기 때문에 그것은 의미가 없습니다. 특정 해상도에서만 작동하는 고정 웹 사이트가 아닙니다!

그냥 CSS에서 이것을 입력 :

body{ 
    width: [pixel_size]px; 
}

출처

2017-04-09 21:00:42

HTML, 브라우저의 크기가 바뀔 때 페이지에서 요소 이동을 멈 춥니 다.

답변

관련 문제