如何在垂直和水平方向拉伸div以占据所有空间？

这是一个两部分的问题，我相信有第三和第四个奖金转折。如何在垂直和水平方向拉伸div以占据所有空间？

我做错了什么让紫色的高度设置为100％有点过高？
我怎样才能设置紫色的宽度，使其100％的剩余空间？
是否通过将所有内容放在同一行上来摆脱黄色和紫色之间的间距以更改HTML代码的唯一方法是？
如何去除绿色边框在自身和外部组件之间的边距？

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%; 
}

来源

2013-05-09 Konrad Viltersten

你能在你的问题中包含代码吗？ – Arbel 2013-05-09 19:41:25

@Arbel我试图发布一个链接到jsFiddle，但是由于抱怨了一些代码...而且我对提交按钮太快了。 – 2013-05-09 19:42:51

你必须发布你的代码，空间它，所以你可以张贴你的小提琴。我编辑过。 – Cam 2013-05-09 19:46:42

我不知道如果我完全理解你的目标。我认为：

固定宽度左侧
可变宽度右

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; 
}

脚本

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

来源

2013-05-09 20:08:56 mawcsco

**天啊！** Coorect假设和正确的答案。其实，这令人沮丧。当我谈到CSS时，我曾经是**的家伙。然后，我做了近一年的其他事情，呕心沥血，没有了。现在，我看到了你的解决方案，我记得有浮动和负余量的技巧。 – 2013-05-09 20:20:37

这会做你想要什么，但我会建议你你的身高设定为固定的，或者它不会工作，

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; 
}

来源

2013-05-09 19:56:13 Cam

不完全。黄色的宽度不是30％。它应该是固定的。但是紫色的应该填写余下的宽度。此外，100％的高度不起作用... – 2013-05-09 20:00:17

如果您试图修复这个宽度，那很容易，我假设您将此设置为创建响应式网站的想法。 – Cam 2013-05-09 20:03:24

左边的宽度应该是固定的。右边的宽度随页面宽度而变化。高度也一样，但在这种情况下，它总是100％。不过，我不明白它的作用。 – 2013-05-09 20:05:52

Updated Demo

浮动左边的列，并做出正确的列中的普通块元素与overflow: hidden。这可能是最简单的方法。

CSS

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

来源

2013-05-09 20:10:15

比我的解决方案要容易得多！ – sbatson5 2013-05-09 20:24:21

您可以使用jQuery动态发现的宽度。

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

然后，在你的CSS，从faqticlePreview删除宽度和漂浮在其他分区左：

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

来源

2013-05-09 20:11:54 sbatson5

如何在垂直和水平方向拉伸div以占据所有空间？

回答

相关问题