2012-05-18 8 views
5

添付の画像に示すようにページレイアウトを作成しようとしています。問題は、私が正しく動作させることができないということです。私は半日を過ごすために努力しましたが、成功することはありませんでした。私はちょうどメニューの固定幅のdivとその残りのページ幅の半分を取る列を作成する2つのdivの隣にしたい。高さはすべてコンテンツに依存する必要があります。divを含むピクセル/パーセンテージの混在レイアウトを作成する

誰かアイデア?私はこのような混在したピクセル/ピクセルのレイアウトに関する多くの情報を見つけることができましたが、それは難しいとは想像できません。

映像:そのようなenter image description here

+0

負のマージンで問題が解決されます。それらのすべて。 – Ben

答えて

2

何か:

<style type="text/css"> 
.container 
{ 
    padding-left: 160px; 
    position: relative; 
} 
.leftmenu 
{ 
    width: 160px; 
    height: 200px; 
    background: red; /* For demo purposes */ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.width50 
{ 
    width: 50%; 
    float: left; 
} 
.left-content 
{ 
    height: 300px; 
    background: green /* For demo purposes */ 
} 
.right-content 
{ 
    height: 150px; 
    background: blue /* For demo purposes */ 
} 
.clear 
{ 
    clear: both; 
} 
</style> 
<div class="container"> 
    <div class="leftmenu"></div> 
    <div class="content"> 
    <div class="width50 left-content"></div> 
    <div class="width50 right-content"></div> 
    <div class="clear"></div> 
    </div> 
</div> 

(ヘッダまたはフッタなし)だけ内側容器

+0

これは完全に機能します。ここで私はあなたのコードで[jsfiddle example](http://jsfiddle.net/libinvbabu/R6LCz/)を作成しました。結果パネルのサイズを変更して結果を確認できます。 +1 – Libin

+0

ありがとう!私は今までそれを見る時間がなかった。これは、IE以外のすべてのブラウザで魅力的に機能します。問題は、IEだけで動作する会社の問題だということです。これを修正するには?ありがとうございます! – koenlek

+0

こちらのお手伝いをしてください:http://stackoverflow.com/questions/26386171/how-to-ensure-the-background-image-inside-a-div-is-evenly-shown/26386885?noredirect=1# comment41429026_26386885 – SearchForKnowledge

0

javascriptのアプローチです。

ここでは、必要なレイアウトを作成しました。 Check this link

ブラウザのサイズを変更してください。それが働いているのを見ることができます!

次のスクリプトを使用して画面の解像度を確認し、コンテンツの幅を計算しました。

<script type="text/javascript"> 
wscreen = window.innerWidth; //Determine screen resolution 
content_width = (wscreen - 160); //Adjusting the screen 
document.getElementById("container").style.width = content_width + "px"; // Adding the width to CSS 
</script> 

純粋なCSSアプローチも機能します。

乾杯!

関連する問題