Question

我的布局包括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的左边和宽度值，但是它变得很乱，如果可能的话就想避免它。

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

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

提前感谢您的帮助。

Answer 1

我会在div中添加一个包装器，这样你就可以浮动，而不是绝对定位。这样你至少可以制作一个100％宽的div。例如正确的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%;
  }

带有附加classto toggle divs的CSS示例

 #main.only-left #left{
   width:100%;
  }
 #main.only-left #right{display:none;}

Answer 2

我想我知道你在谈论什么。我在这里创造了一个小例子。基本上在侧栏上设置30％，在主列上设置display: block;。在任何地方点击正文以切换侧栏以显示主列如何适应......这是朝着正确的方向发展吗？

Codepen sketch

<强> 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');
});

UPDATE ：这是一个jQuery用于类切换的一点例子。可能会更多地概括...... http://codepen.io/kunalbhat/pen/kuAcg

如何自动扩展绝对定位DIV

2 个答案: