Question

我网站的问题在于我希望导航和标题从屏幕的一侧到另一侧继续整个过程。导航从我页面的最左侧到屏幕的最右侧，但不会显示在屏幕的左侧，标题只是从页面向右重叠一点。

如果有人能告诉我如何解决这些问题，我会喜欢它。这是我网站的CSS：

/* BACKGROUND */

body {
 background-color:#339999;
 background-attachment: fixed;
 }

*{
 margin:0;
 padding:0;
 }

img {
 border:0;
 }

/* AREA */

#wrapper {
 margin:0 auto;
 width:950px;
 background:#ffffff;
 font-size:1.20em;
 }

/* HEADER */

#header {
 margin-top: 40px;
 height: 150px;
 padding: 20px 30px;
 width: 100%;
 }

/* PAGE */

#content {  
 min-height:400px;
 padding:23px;
 text-align:justify;
 line-height:1.5;
 }

/* FOOTER */

#flexifooter{
 width: 950px;
 background: #339999;
 padding: 10px 0px 0px 0px;
 }

/* MENU */

#menu {
 position: fixed;
 clear: both;
 top: 0;
 width: 100%;
 color: #ffffff;
 height: 35px;
 padding-top: 1px;
 float: left;
 display: inline;
 background-color: rgba(1, 1, 1, 0.8);
 color: rgba(1, 1, 1, 0.8);
 }

#menu {
 height:35px;
 line-height:34px;
 padding:0 10px;
 }

/* MENU TEXT */

#menu ul {
 list-style-type:none;
 }

#menu li {
 float:left;
 }

#menu li a {
 padding:0 15px;
 display:block;
 color:#ffffff;
 font-size: 13px;
 margin-right:0px;
 }

#menu a {
 padding-left: 15px;
 padding-right: 15px;
 text-decoration: none;
 list-style: none;
 display: inline;
 }

#menu a:hover {
 color: #339999;
 }

#navigation a:hover, a:visited {
 color: #339999;
 }

/* HEADINGS & HEADER */

h2 {
  font-size:1.75em;
  font-weight:normal;
  color: #6CC7DC;
  margin: 10px 0;
  line-height:1.5;
  }

#header {
 font-size:2.5em;
 letter-spacing:1px;
 }

#header, #header a {
 color:#6F6F6F;
 font-style:italic;
 font-weight:normal;
 }

/* SCROLLBAR */

body {
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 overflow-x: hidden;
 }

::-webkit-scrollbar {
 width: 3px;
 height: 10px;
 }

::-webkit-scrollbar-track-piece {
 background-color: #339999;
 }

::-webkit-scrollbar-thumb:vertical {
 height: 50px;
 background-color: #FFFFFF;
 }

 /* PREVENTING UNDERLINED LINKING */

a:hover, a:visited, a:link, a:active {
 text-decoration: none;
 }

Answer 1

一些事情，如果您使用html5，您可以使用header元素并将其css设置为100％宽度和高度到您想要使用的任何高度。请参阅下面的示例。拥有HTML将最终有助于帮助您。

<强> HTML

<header>
       <nav>
       </nav>
</header>

<强> CSS

header {
  width: 100%;
  height: 5em;
}

http://jsfiddle.net/cornelas/8RXD2/

如何使我的导航和标题真正100％宽度？

1 个答案: