如何在垂直和水平方向拉伸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以佔據所有空間？

回答

相關問題