如何在瀏覽器調整大小時修復重疊居中的靜態div？

Question

我正在嘗試構建一個帶有側邊欄的兩個圓柱布局，側邊欄始終位於頁面的左側，主要內容區域居中，當窗口調整大小時，居中的內容最終會碰到導航欄，但是從不移動任何比它們觸摸時更遠的地方（剩下的就是：150px）。

有人可以幫我嗎？

這是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>

任何幫助是極大的贊賞！

Answer 1

我剛剛學到的一個巧妙的小技巧是讓你的#content位置：相對; 然后使其中的所有子元素位置：絕對; 這樣，所有子元素都是您的內容區域的絕對元素，內容將調整為任何分辨率。 為我節省了大量的時間，我無法相信我曾浪費多少時間來浪費鋪設動態網站。

希望這能為你做點什么。

Answer 2

做這個：

<!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周圍創建一個包裝器div，並使該包裝div具有150px的左邊距，以便它與導航欄並排。 現在主div中的所有調整大小都應限制在包裝器內。

如何在瀏覽器調整大小時修復重疊居中的靜態div？

問題描述

2 個解決方案

解決方案1
1 2012-04-11 22:44:01

解決方案2
1 已采納 2012-04-11 23:07:12

如何在瀏覽器調整大小時修復重疊居中的靜態div？

問題描述

2 個解決方案

解決方案1 1 2012-04-11 22:44:01

解決方案2 1 已采納 2012-04-11 23:07:12

解決方案1
1 2012-04-11 22:44:01

解決方案2
1 已采納 2012-04-11 23:07:12