使用div创建混合像素/百分比布局

我正在尝试制作页面布局，如附图所示。问题是我无法正常工作。我花了半天的时间试图让它工作，但没有成功。我只想为菜单设置一个固定宽度的div，然后在两个div旁边创建每个占用剩余页面宽度一半的列。高度都需要依赖于内容。使用div创建混合像素/百分比布局

有人有想法吗？我可以找到关于这种混合perecentage /像素布局的很多信息，但我无法想象这很难。

图片： enter image description here

来源

2012-05-18 koenlek

负边限将解决您的问题。他们全部。 – Ben

类似的东西：

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

即仅内侧容器（无页眉或页脚）

来源

2012-05-18 13:29:39 Sylvix

完美的作品。在这里我用你的代码创建了一个[jsfiddle例子]（http://jsfiddle.net/libinvbabu/R6LCz/）。我们可以通过重新调整结果面板来查看结果。 +1 – Libin

谢谢！到现在为止，我没有时间看看它。它在除IE以外的所有浏览器中都很有魅力。问题在于它只适用于仅适用于IE的公司。如何解决这个问题？提前感谢！ – koenlek

任何帮助这个请：http://stackoverflow.com/questions/26386171/how-to-ensure-the-background-image-inside-a-div-is-evenly-shown/26386885?noredirect=1# comment41429026_26386885 – SearchForKnowledge

一个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方法也可以。

干杯！

来源

2012-05-18 17:42:00 Libin

使用div创建混合像素/百分比布局

回答

相关问题