具有透明邊框圖像的容器的CSS樣式

想要製作如下圖所示的頁面佈局。有三個主要組件，frameleft,framemid和frameright。雖然framemid包含頁面內容，但其他兩個組件只是其中包含透明.png文件的邊框。具有透明邊框圖像的容器的CSS樣式

問題是如何使frameleft和frameright與framemid正確縮放？我發現前面提到的類似問題here，但在接受的答案（根本不能解決問題）中描述的技術並不適用於側組件中的圖像透明時。

Layout

我的解決方案到目前爲止依賴於殼體在一個div和手動設置其高度這些組件。這顯然不是最佳選擇，因爲我理想的情況是整個團隊都會從framemid推斷出這個高度。

HTML房屋具有預定高度一個div內的三個分量。

<div style="height: 500px"> 
    <div class="frameside frameleft"></div> 
    <div class="framemid"> some content </div> 
    <div class="frameside frameright"></div> 
</div>

CSS相對於所述殼體部件縮放側的圖像。

.frameside { 
    background-repeat: repeat-y; 
    float: left; 
    width: 10px; 
    height: 100%; 
} 

.frameleft { background-image: url("frame_left.png"); } 

.frameright { background-image: url("frame_right.png"); } 

.framemid { 
    width: 500px; 
    float: left; 
}

我寧願沒有接受CSS3或HTML5解決方案/伎倆，因爲這與大多數瀏覽器。

編輯

看到這個jsfiddle，戰爭前線的禮貌，對於播放能力，版本。

來源

2011-07-21 Gleno

我看到你正在使用單獨的圖像框架的權利和左是他們不同或是隻是與純色和不透明度相同的PNG？ – Litek

你介意在IE7中無法使用嗎？另外：除了背景之外，還有什麼需要去左/右？ – thirtydot

@Litek - 不同的圖像。我明白你在做什麼，不，他們並不簡單。假設他們有某種模式或某種模式。 – Gleno

做任何事情需要在左/右等去比背景？ - thirtydot

@thirtydot也許在的未來 - 「是」，但讓我們說「不」，現在。

如果東西可能需要去那裏，這是一個選項：http://jsfiddle.net/M5UqW/（嘗試調整窗口大小）

它工作在IE7 +和所有現代瀏覽器。

HTML：

<div class="frameouter"> 
    <div class="frameside frameleft"></div> 
    <div class="framemid">content</div> 
    <div class="frameside frameright"></div> 
</div>

CSS：

.frameouter { 
    border: 2px solid #444; 
    overflow: hidden; 
    position: relative 
} 
.frameside { 
    background-repeat: repeat-y; 
    width: 10px; 
    position: absolute; 
    top: 0; 
    bottom: 0 
} 
.frameleft { 
    background-image: url(http://dummyimage.com/64x64/f0f/fff); 
    left: 0 
} 
.frameright { 
    background-image: url(http://dummyimage.com/64x64/00f/fff); 
    right: 0 
} 
.framemid { 
    margin: 0 10px; 
    background: #ccc 
}

來源

2011-07-21 09:06:41 thirtydot

謝謝！我認爲這是最乾淨的工作示例！ – Gleno

修訂

然後看看這個

http://jsfiddle.net/kAesm/3/

設置HTML，身體100％的高度，然後在frameid設定的最小高度爲100％它應該做的伎倆。只需刪除我添加的邊框，使其更易於查看。

添加

html, body{ 
    height:100%; 
}

修改這個太

.frameid{ 
    ... 
    min-height:100%; 
}

示例鏈接

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

來源

2011-07-21 00:03:01 Warface

這不是問題。問題是「如何使柱子高度相等？」。 – thirtydot

正如thirtydot指出我正在用png解決我的透明度問題，並希望使列的高度相同。 – Gleno

您更新的jsFiddle似乎沒有包含任何'height：100％'。 *（順便說一句，不是我的downvote）* – thirtydot

確定。我知道你沒有要求腳本解決方案，但jQuery可以很輕鬆地完成這項工作。

var h = $('.framemid').height(); 
$('.frameside').height(h + 'px');

http://jsfiddle.net/jasongennaro/kAesm/7/

來源

2011-07-21 01:40:27

+1爲一個可行的解決方案...我真的不應該使用腳本對於這一個，雖然，這應該是一個「適用於所有人」頁面。我願意讓IE6脫離惡意，但就是這樣。 :) – Gleno

謝謝@Gleno。你是否擔心那些沒有啓動js或支持較低版本IE的人？ –

我擔心有些人可能沒有啓用js，並且頁面看起來很抱歉。我通常不喜歡依靠js來正確渲染頁面。 – Gleno

檢查了這一點：http://jsfiddle.net/thilakar/kAesm/11/

請添加下面的風格

.container div{ 
    padding-bottom:300px; 
    margin-bottom:-300px; 
}

上面款式將影響三個格（frameleft，frameid和frameright），你也可以加一個樣式的容器部分

.container { 
    overflow:hidden;  
}

低於全部分

的Html

<div class="container"> 
    <div class="frameside frameleft">Left</div> 
    <div class="framemid"> 
     <p>some content 
      sdfklsjdf 
      lsdkfjsdlfkj 
     </p> 
     <p>some content 
      sdfklsjdf 
      lsdkfjsdlfkj 
     </p> 
     <p>some content 
      sdfklsjdf 
      lsdkfjsdlfkj 
     </p>   
     </div> 
    <div class="frameside frameright">Right</div> 
</div>

CSS：

html,body{ 
    height:100% 
} 

.frameside { 
    background-repeat: repeat-y; 
    float: left; 
    width: 30px; 
    background:#ccc; 
} 
.container { 
overflow:hidden; 
} 
.container div{ 
    padding-bottom:300px; 
    margin-bottom:-300px; 
} 

.frameleft { 
    background-image: url("frame_left.png"); 
    float:left; 
} 
.frameright { 
    background-image: url("frame_right.png"); 
    float:left; 
    background:#ccc; 
} 

.framemid { 
    width: 300px; 
    float: left; 
    background:#999; 
}

來源

2011-07-21 04:22:50

+1看起來不錯。順便說一句：你應該添加代碼到你的答案。更好的辦法是添加代碼和解釋。沒有人知道該鏈接是否會始終存在。 –

@jason Gennaro，我可以應用padding-bottom：-300px這兩種風格;和margin-bottom：-300px。你可以增加像素取決於頁面的高度。請檢查我編輯的答案 –

的例子的jsfiddle我看到3，6，10的URL不在IE8工作無。爲什麼不使用一張桌子並嘗試它。

來源

2011-07-22 02:52:33

具有透明邊框圖像的容器的CSS樣式

回答

相關問題