0

我的布局包括一个 100% 宽度的标题、2 列内容 div（30-70% 宽度）和一个 70% 宽度的页脚（仅在右 div 的底部可见）。

我的 HTML 标记如下：

<section id="mySection" >
  <header id="headerTop">
  </header>
  <div id="wrapperLeft">
  </div>
  <div id="wrapperRight">
  </div>
  <footer id="footerRight">
  </footer>
</section>

我的 CSS 是

 #mySection
 {
  margin:0 auto;
  padding:0;
  text-align:center;
  vertical-align:middle;
  overflow:hidden;
 }

 #headerTop
 {
  position:absolute;
  top:0;
  left:0;
  height:40px;
  width:100%;
  overflow:hidden;
 }

 #wrapperLeft
 {
   position:absolute;
   top:40px;
   left:0;
   width:30%;
   bottom:0;
   overflow:auto;
 }

 #wrapperRight
 {
   position:absolute;
   top:40px;
   left:30%;
   width:70%
   bottom:30px;
   overflow:auto;
 }

 #footerRight
 {
    position:absolute;
    left:30%;
    bottom:0;
    width:70%;
    overflow:hidden;
 }

我想知道我是否可以更好地设计这个，如果我隐藏左或右 div，另一个 div 显示为 100%。我想我可以通过 javascript 动态更改 CSS 并调整其他 div 的 left 和 width 值，但它变得混乱，如果可能的话想避免它。

理想情况下会喜欢在 div 上调用 show 或 hide ，而另一个 div 会自动将自身调整为 100% 宽度。

我无法控制任一 div 中内容的高度，并且希望浏览器在内容高度超过窗口时显示滚动条。

在此先感谢您的帮助。

4

2 回答 2

0

我会在 div 中添加一个包装器，这样你就可以浮动而不是绝对定位。这样，您可以使至少一个 div 100% 宽。例如正确的 div。如果您希望两个 div 的大小都是动态的，则必须使用 jquery。例如，如果您想将 jquery 保持在最低限度，请添加类。

示例 HTML：

  <div id="header"></div>
  <div id="main">
     <div id="left"></div>
     <div id="right"></div>
  </div>
  <div id="footer"></div>

示例 CSS：

  #main{ 
     position:relative;
     overflo:hidden  // This will make the container grow with the children
     width:960px;
  }

  #left{
     width:200px;
     float:left;
     height:100%;
   }

  #right{ 
     float:left;
     width:100%;
     height:100%;
  }

带有附加类的 CSS 示例以切换 div

 #main.only-left #left{
   width:100%;
  }
 #main.only-left #right{display:none;}
于 2013-08-30T20:19:49.733 回答
0

我想我知道你在说什么。我在这里创建了一个小例子。基本上在侧栏和display: block;主栏上设置 30%。单击主体任意位置以切换侧列以显示主列如何适应...这是朝着正确的方向发展吗？

Codepen 草图

HTML

<div class='wrapper'>
  <header>Header</header>
  <section>
    <aside>Sidebar</aside>
    <article>Main article</article>
  </section>
  <footer>Footer</footer>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

section {
  overflow: hidden;
  position: relative;
}

header {
  background: crimson;
  height: 100px;
  width: 100%;
}

aside {
  background: #efefef;
  float: left;
  height: 300px;
  width: 30%;
}

aside.hide { display: none; } /** For demo purposes **/

article {
  background: #ccc;
  display: block;
  height: 300px;
}

footer {
  background: crimson;
  float: right;
  height: 100px;
  width: 70%;
}

jQuery（仅用于 hideToggle 示例）

$('html').on('click', function(){
  $('aside').toggleClass('hide');
});

更新：这是一个来自 jQuery 的用于类切换的小帮助示例。可能可以更概括... http://codepen.io/kunalbhat/pen/kuAcg

于 2013-08-30T20:24:44.137 回答