液体布局无问题

Question

这让我疯了！我正在尝试做一个具有左固定宽度（130px），中间流体柱和右流体柱的液体布局，所有这些都具有20px的边距。

因为我只希望在内容溢出时滚动右列，我将左侧和中间放在固定定位容器.wrapper（占用页面的50％）中，另外50％放在右侧列中。我已经将边距作为边框尺寸的边框。

但是当我调整浏览器大小时，中间列会调整大小，直到消失，左侧和中间列的文本溢出。

有什么想法吗？

<head>


<style>


html, body {
height: 100%;
padding: 0;
margin:0;
}



html {
background-color: #555;
}


.wrapper {
padding:0;
margin: 0 20px 0 0;
position:fixed;
width:50%;
background:blue;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border:20px solid white;
}

.middle {

background:yellow;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border-left:150px solid white;
margin:0;
padding:0;

}




.right {
float: right;
width:50%;
height:100%;
background:pink;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border-right:20px solid white;
border-top:20px solid white;
border-bottom:20px solid white;
}





.left {
float:left;
width:130px;
background:green;
height:100%;
margin-right:20px;
}

</style>
</head>

<body>
<div class="wrapper">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

</div>

<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>





</body>

我也在jquery上做过这个，但我似乎遇到了同样的调整问题。任何人都可以对这个问题有所了解吗？非常感谢！

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>



<style>
html, body {width:100%;margin:0; padding:0;}

html {  overflow-y: scroll;}




.middle {
position:fixed;
background:yellow;
left:170px;
top:20px;
margin-right:20px;
}

.left {
position:fixed;
left:20px;
top:20px;
background:blue;
width:130px;
margin-right:20px;
}

.right {
float:right;
margin: 20px 20px 20px 0px;
background:blue;
width:50%;
}



</style>
</head>
<body>


<div class="left">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>
<div class="middle">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>


<div class="right"></div>



<script>

$(document).ready(function () { /* standard jQuery document ready */
$('.left').css('height', '100%').css('height', '-=40px');
$('.middle').css('width', '50%').css('width', '-=170px');
$('.middle').css('height', '100%').css('height', '-=40px');
$('.right').css('height', '100%').css('height', '-=40px');
$('.right').css('width', '50%').css('width', '-=40px');

});



$(window).on('resize', function(){


$('.left').css('height', '100%').css('height', '-=40px');
$('.middle').css('width', '50%').css('width', '-=170px');
$('.middle').css('height', '100%').css('height', '-=40px');
$('.right').css('height', '100%').css('height', '-=40px');
$('.right').css('width', '50%').css('width', '-=40px');

});





</script> 

</body>

Answer 1

液体布局无问题

如果您提供其他要求，我可以轻松调整以下代码以适应。

<强> HTML

<div class="Lft">
  LEFT CONTENT
</div>
<div class="RgtContent">
  <div class="Mid">
    MID CONTENT
  </div>
  <div class="Rgt">
    RIGHT CONTENT
  </div>
</div>

<强> CSS

.Lft{
    height:100%;
    background:#b00;
    position:fixed;
    width:130px;
}
.RgtContent{        
    width:100%;
    margin-left:130px;
}
.Mid{
    float:left;
    height:100%;
    background:#0b0;
    width:50%; 
}
.Rgt{
    float:left;
    height:100%;
    background:#00b;
    width:50%;
}

http://jsfiddle.net/7nQMx/

带有PADDING / MARGINS的示例

边距不是盒子大小模型的一部分，但是，带有边距的所需div周围的包装具有相同的效果。

http://jsfiddle.net/7nQMx/1/

<强> HTML

<div class="Lft">
LEFT CONTENT
</div>
<div class="RgtContent">
  <div class="RightWrapper">
    <div class="Mid">
      MID CONTENT
    </div>
    <div class="Rgt">
      RIGHT CONTENT
    </div>
    </div>
</div>

<强> CSS

.Lft{
    height:100%;
    background:#b00;
    position:fixed;
    width:130px;
}
.RightWrapper{
   margin-left:130px; 
}
.RgtContent{    
    width:100%;
    padding:20px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.Mid{
    float:left;
    height:100%;
    background:#0b0;
    width:50%; 
}
.Rgt{
    float:left;
    height:100%;
    background:#00b;
    width:50%;
}

要使右列滚动只需设置高度和溢出属性：

.Rgt{
    height:500px;
    overflow-y:scroll;
}

http://jsfiddle.net/7nQMx/3/

Answer 2

我认为这可能是你的开始：

http://jsfiddle.net/S4mxM/

<div class="left">
    Lorem ipsum dolor sit amet...
</div>

<div class="wrapper">
    <div class="middle">
                Lorem ipsum dolor sit amet...
    </div>

    <div class="right">
                    Lorem ipsum dolor sit amet...
    </div>
</div>

CSS

html, body {
padding: 0;
margin:0;
}

html {
background-color: #555;
}
.left, .middle, .right, .wrapper {
    height: 100%;
}
.wrapper {
    background: blue;
    margin-left: 150px
    width: auto;
}
.left {
    background: green;
    float: left;
    width: 130px;
}
.middle, .right {
    width: 50%;
    float: left;
}
.middle {
    background: yellow;
}
.right {
    background: pink;
}

我重写了整个代码

液体布局：3列 - 固定流体液体，带有px边距

2 个答案:

液体布局无问题