브라우저에서 크기가 중첩 된 정적 div를 크기를 조정하여 div를 수정하는 방법은 무엇입니까?

메인 콘텐츠 영역이 가운데에있는 페이지의 왼쪽에 항상있는 세로 막대가있는 두 개의 세로 막 대형 레이아웃을 만들려고합니다. 그리고 창 크기를 조정하면 중심에있는 콘텐츠가 결국 nav 바를 만지지 만 왼쪽으로 이동하지 마십시오 (왼쪽 : 150px).브라우저에서 크기가 중첩 된 정적 div를 크기를 조정하여 div를 수정하는 방법은 무엇입니까?

누군가 나를 도울 수 있습니까? 여기

는 CSS입니다 :

@charset "UTF-8"; 
/* CSS Document */ 

body,td,th { 
    font-size: 16px; 
    font-family: Verdana, Geneva, sans-serif; 
    color: #000; 
} 

body { 
    background-color: #FFF; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 15px; 
    margin-bottom: 0px; 
} 

#nav { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 150px; 
    height: 10000px; 
    background-color: #D61D21; 
    text-align: right; 
} 

#nav a:link { 
    color: #FFF; 
    text-decoration: none; 
} 

#nav a:visited { 
    color: #FFF; 
    text-decoration: none; 
} 

#nav a:hover { 
    color: #FFF; 
    text-decoration: underline; 
} 

#main { 
    width: 810px; 
    height: 810px; 
    margin: 0px auto; 
}

여기에 HTML입니다 : 어떤 도움을 주시면 더 좋구요

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Nick Passaro Designs</title> 
<link href="css/index.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 

    <div id="nav"> 
     <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a> 
     <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p> 
     <p><a href="logos.php">LOGOS</a> &nbsp;</p> 
     <p><a href="print.php">PRINT</a> &nbsp;</p> 
     <p><a href="web.php">WEB DESIGN</a> &nbsp;</p> 
     <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p> 
     <p><a href="contact.php">CONTACT</a> &nbsp;</p> 
    </div> 

    <div id="main"> 
     ENTER CONTENT HERE 
    </div> 

</body> 
</html>

출처

2012-04-11 Nick Passaro

이 작업을 수행합니다 :

는

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Nick Passaro Designs</title> 
<link href="index.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <div id="nav"> 
     <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a> 
     <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p> 
     <p><a href="logos.php">LOGOS</a> &nbsp;</p> 
     <p><a href="print.php">PRINT</a> &nbsp;</p> 
     <p><a href="web.php">WEB DESIGN</a> &nbsp;</p> 
     <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p> 
     <p><a href="contact.php">CONTACT</a> &nbsp;</p> 
    </div> 

    <div id="wrapper"> 
     <div id="main"> 
      ENTER CONTENT HERE 
     </div> 
    </div> 
</body> 
</html>

CSS는 :

#wrapper{ 
    margin-left: 150px; 
}

당신이 할 것은 그 래퍼 사업부를 주 DIV 주위에 래퍼 사업부를 만들 수 있도록이다가 150 픽셀의 왼쪽 여백은 그래서 있다는 네비게이션 바와 나란히. 이제 주 div 내부의 모든 크기 조정은 래퍼 내로 제한되어야합니다.

출처

2012-04-11 23:07:12 Jack

감사합니다! 그 트릭을 했어. –

방금 배운 멋진 트릭은 #content 위치를 지정하는 것입니다. 그리고 그 안의 모든 자식 요소를 위치 시키십시오 : 절대; 그런 식으로 모든 하위 요소는 콘텐츠 영역에 절대적이며 콘텐츠는 모든 해상도로 조정됩니다. 너무 많은 시간을 절약하고 동적 사이트를 낭비하는 데 얼마나 많은 시간을 소비했는지 믿을 수 없습니다.

희망이 있습니다.

출처

2012-04-11 22:44:01 sethhoova

그게 내가 원하는 것인지 확실하지 않습니다. 이전에 해봤지만 #content 내의 객체가 서로 상대적으로 배치되는 방식을 변경하는 것을 허용하지 않습니다. #nav가 항상 화면 맨 왼쪽에 붙어 있어야하며 터치 할 때까지 #centent가 가운데에 있어야하지만 둘러 볼 div의 자식으로 가질 수는 없습니다. –

브라우저에서 크기가 중첩 된 정적 div를 크기를 조정하여 div를 수정하는 방법은 무엇입니까?

답변

관련 문제