使用CSS定位導航欄

Question

我將我的垂直導航欄放在我的內容Div左側時遇到問題。 這是我擁有的和我想要的：

問題是，它是一個固定的位置，因此對於不同尺寸的顯示器來說它是不同的。 所以我猜我需要相對定位，但我不太清楚如何做到這一點。

HTML

<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href= "styles/styling.css" />
</head>

<div class="container">
  <ul class="nav">.....(Just nav bar stuff)


<div class="content">
<h1>abcd</h1>

<p>abcd</p>
</div>

CSS

.content { 
background-color: #FFFFFF; 
width: 650px; 
padding: 20px;
margin: auto; 
word-wrap: break-word 
}

.container {
position: fixed;
top: 151px;
left: 420px;
}

謝謝！

Answer 1

向下滾動時，固定位置將幫助您保持菜單可見。 否則，你不應該使用它。

<div class="container">
  <div class="one-third column">
      <ul class="yourmenu">xxx</ul> 
      <div class="filler"></div>
  </div>
  <div class="two-thirds column">
      Your page content here
  </div>
</div>

<style>
    .container {width:960px;margin:auto;}
    .column {float:left;position:relative;}
    .one-third {width:320px;}
    .two-thirds {width:640px;}
    .filler {width:100%;height:10px;}
    .yourmenu {position:fixed;top:100px;} /* do not define left, because it will fix the screen and not the column div */
</style>

Answer 2

使用百分比（％）代替像素（px）。

使用CSS定位導航欄

問題描述

2 個解決方案

解決方案1
3 已采納 2014-12-15 17:55:06

解決方案2
0 2014-12-15 18:52:43

使用CSS定位導航欄

問題描述

2 個解決方案

解決方案1 3 已采納 2014-12-15 17:55:06

解決方案2 0 2014-12-15 18:52:43

解決方案1
3 已采納 2014-12-15 17:55:06

解決方案2
0 2014-12-15 18:52:43