css - 如何垂直和水平拉伸 div 以占据所有空间？

Question

我相信这是一个两部分的问题，还有第三和第四个额外的转折。

1. 我做错了什么让紫色的高度设置为 100% 有点太高了？

2. 如何设置紫色的宽度，使其占剩余空间的 100%？

3. 摆脱黄色和紫色之间的间距以通过将所有内容放在同一行来更改 HTML 代码的唯一方法是吗？

4. 如何删除绿色边框在 self 和外部组件之间的边距？

jsfiddle.net/jL8e5/1/

div.faqticleList {
  background: #ffdd00;   /* yellow */
  display: inline-block;
  padding: 3px;
  width: 200px;
  height: 150px;
}
div.faqticlePreview {
  background: #bb88ff;   /* purple */
  display: inline-block;
  padding: 3px;
  width: auto;
  height: 100%;
}

Answer 1

I'm not sure if I completely understand your goals. I assumed:

1. Fixed width left
2. Variable width right

http://jsfiddle.net/wXme4/

CSS

body{
    margin: 0;
    padding: 0;
    width: 100%;
}

div.faqticleList {
  background: #ffdd00;
  width: 200px;
  height: 100%;
  float: left;
}
div.faqticlePreview {
  background: #bb88ff;

  width: 100%;
  height: 100%;
  margin-left: -203px;
  padding-left: 203px;
}

div.container {
  border: solid 1px #007700;
  margin: 0px;
  height: 100px;
  //overflow: hidden;
  //overflow: auto;
}

div.faqticleList div, div.faqticlePreview div {
    padding: 3px;
}

Script

document.getElementById("faqticleList").innerHTML = "<div>faqticleList</div>";
document.getElementById("faqticlePreview").innerHTML = "<div>faqticlePreview</div>";

Answer 2

Updated Demo

Float the left column, and make the right column a regular block element with overflow: hidden. That might be the simplest way to do it.

CSS

div.faqticleList {
  /* display: inline-block; */
  float: left;
  ...
}
div.faqticlePreview {
  /* display: inline-block; */
  /* width: auto; */
  overflow: hidden;
  ...
}

Answer 3

这会做你想做的，但我建议你将高度设置为固定，否则它将不起作用，

div.faqticleList {
   background: #ffdd00;
   display: inline-block;
   width: 30%;
   height: 150px;
}
div.faqticlePreview {
   background: #bb88ff;
   display: inline-block;
   width: 69%;
   height: 100%;
   clear: both;
}

div.container {
  border: solid 1px #007700;
  margin: 0px;
  height: 100%;
  //overflow: hidden;
  //overflow: auto;
   display: block;
   clear: both;
}  

Answer 4

您可以使用 jquery 动态查找宽度。

JS:
 document.getElementById("faqticleList").innerHTML = "faqticleList";
 document.getElementById("faqticlePreview").innerHTML = "faqticlePreview";
 var difWidth = $('.container').width() - 212;
 $('#faqticlePreview').css( "width", difWidth )

然后，在您的 CSS 中，从 faqticlePreview 中删除宽度并将另一个 div 向左浮动：

div.faqticleList {
  background: #ffdd00;
  display: inline-block;
  padding: 3px;
  width: 200px;
  height: 150px;
  float: left;
}
div.faqticlePreview {
  background: #bb88ff;
  display: inline-block;
  padding: 3px;
  height: 100%;
}

更新了 jsfiddle：http: //jsfiddle.net/a2Run/

注意：您要减去的宽度需要为 212。第一个 div 的宽度为 200px，加上两个 div 的每侧 3px 的填充 200+(3x4)=212