html - 如何将 Content Div 扩展到浏览器

标签 html css styles stylesheet

<分区>

下面是我的代码,

<div class="wrapper">
  <div class="left">
  </div>

  <div class="right">
  </div>
</div>

我已经将我的 wrapper 的宽度设置为 100% 我现在将左边的宽度设置为 40px

1) 我想将我的 right div 宽度从 40px 扩展到几乎等于 98.6% 的浏览器窗口 2) 我想将我的 left div 高度扩展到 right div 高度

如何解决这个问题?

最佳答案

请试试 css3 flexbox 模块,像这样:

HTML

<div class="wrapper">
  <div class="left">
    left
  </div>

  <div class="right">
    right
  </div>
</div>

CSS

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  height: 100%;
  width: 100%;
  display:-moz-box;
  display:-webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.left {
  width: 40px;
  background: green;
}
.right {
  -moz-flex-box: 1;
  -webkit-flex-box: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: orange;
}

请查看demo .关于CSS3 flexbox模块,请点击here .

关于html - 如何将 Content Div 扩展到浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17140001/

上一篇:css - 使用 CSS 的盒子阴影

下一篇:jquery - 单击 addClass 函数仅在页面上调用而不是在外部 js 文件中调用时才有效

相关文章:

javascript - 在不同的事件上应用不同的样式?

javascript - 将当前类添加到自动图像转换器

html - 在容器 div 中对齐按钮链接

javascript - 是否可以在一个 div 中有两个 div,一个停靠在左边,一个停靠在右边,这样当空间不可用时,一个会缩小?

html - 带有右侧箭头的 Span 元素

html - 增加 UL 列表元素符号的宽度

javascript - jQuery 关于单选按钮的更改事件

css - 如何在 100% 文本框中设置 bgimg?

javascript - 添加带有数据的新 div 并在单击时删除它们

wpf - 在 Silverlight 4 中以编程方式设置控件的样式?