CSS的布局问题和缺乏经验的问题

时间:2014-05-21 16:25:26

标签: html css http web css-float

我有关于HTML和CSS布局的问题。在我的网站上我想要的只是一个用于导航的固定左栏和用于留言的固定顶栏。

当用户向下滚动页面时,我想要两个项目(固定),但我有一个问题告诉CSS我希望顶部栏填满页面宽度的其余部分。

使用此HTML:

<body>
    <div id="leftbar">
         <img border="0" src="images/somelogo.png">
         <p>leftbartest</p>
         <p></p>
    </div>
    <div id="topbar">
         <p>topbartest</p>
    </div>
   </div>
</body>

考虑这两个CSS示例:

栏已固定并在滚动时停留在页面上,但在调整浏览器窗口大小时将不会填充宽度并调整大小(适合文本大小):

 body {
    background-color: #A69E40;
 }
 html {
    height: 99%;
    width: 99,8%;
 }
 #leftbar {
    position: fixed;
    float: left;
    margin-left: -8px;
    margin-top: -8px;
    background-color: #FFFFFF;
    width: 272px;
    height: 100%;
    z-index: 2;
    border: outset 2px #000000;
 }
 #topbar {
    position: fixed;
    float: left;
    margin-left: 268px;
    margin-top: -8px;
    background-color: #FFFFFF;
    height: 35px;
    z-index: 5;
    border: solid 1px #000000;
 }

栏不固定,滚动时不会停留在页面上,但会在调整浏览器窗口大小时填充宽度并调整大小:

body {
   background-color: #A69E40;
}
html {
   height: 99%;
   width: 99,8%;
}
#leftbar {
   position: fixed;
   float: left;
   margin-left: -8px;
   margin-top: -8px;
   background-color: #FFFFFF;
   width: 272px;
   height: 100%;
   z-index: 2;
   border: outset 2px #000000;
}
#topbar {
   margin-left: 268px;
   margin-top: -8px;
   background-color: #FFFFFF;
   height: 35px;
   z-index: 5;
   border: solid 1px #000000;
}

它意味着创建某种类型的门户,其中一个表将嵌入左侧栏的右侧和顶栏下方。总而言之,左侧栏应该适合第一个272宽度像素的整个高度,顶部栏应该适合35像素高度的整个宽度,其余部分将用于放置一些桌子。

请详细说明,我是这个HTML和CSS这个奇妙世界的新手,我希望在这个现代技术领域变得坚实。

再次感谢您阅读本文,并感谢您在我愚蠢的初学者问题上的头脑风暴。

1 个答案:

答案 0 :(得分:0)

Here's a CodePen demo.

顶部和顶部左侧栏上的顶栏

<强> HTML

<nav id="left-bar">
  Left bar
</nav>

<header id="top-bar">
  Top Bar
</header>

<article>
  All your content goes here.
</article>


CSS

html, body {
  margin: 0px;
  padding: 0px;
  background: #E4E4C5;
  width: 100%;
  height: 100%;
}

header {
  position: fixed;
  background: #8D2036;
  width: 100%;
  height: 35px;
}

nav {
  padding-top: 35px;
  position: fixed;
  background: #B9D48B;
  width: 272px;
  height: 100%;
  box-sizing: border-box;
}

article {
  padding: 55px 20px 20px 292px;
  width: 100%;
  box-sizing: border-box;
}

左栏拉伸整个高度和旁边的顶栏

<强> HTML

<header id="top-bar">
  Top Bar
</header>

<nav id="left-bar">
  Left bar
</nav>

<article>
  All the content goes here...
</article>


CSS

html, body {
  margin: 0px;
  padding: 0px;
  background: #E4E4C5;
  width: 100%;
  height: 100%;
}

header {
  padding-left: 272px;
  position: fixed;
  background: #8D2036;
  width: 100%;
  height: 35px;
}

nav {
  position: fixed;
  background: #B9D48B;
  width: 272px;
  height: 100%;
  box-sizing: border-box;
}

article {
  padding: 55px 20px 20px 292px;
  width: 100%;
  box-sizing: border-box;
}