需要设置中间列DIV精确宽度，以百分比为基础的左右DIV和设置高度
[英]Need to set a middle column DIV exact width with percent based right and left DIVs and set height
问题描述
I could use some help designing the CSS/HTML for this layout.... 
我可以使用一些帮助为这个布局设计CSS / HTML ....
The whole thing will be a popup MOdal centered on the screen. 整个事情将是一个以屏幕为中心的MOdal弹出窗口。
The top full width bar is for a Task Title THe left column is for a Task Description and the Div at the bottom left is a Fixed DIV to hold an Edit Task Description button. 顶部全宽度条用于任务标题左侧列用于任务描述，而左下角的Div是用于保存“编辑任务描述”按钮的固定DIV。
The middle DIV is a fixed width of 200px and will contain many Task data fields. 中间DIV的固定宽度为200px，将包含许多任务数据字段。
The Right column will contain a Task Activity/Comment stream. 右列将包含任务活动/注释流。 Below it on Bottom right is a Fixed DIV that would hold the Comment form for creating new comments 右下方是一个固定DIV，它将保存评论表单以创建新评论
http://i.imgur.com/Vq5Ad66.png http://i.imgur.com/Vq5Ad66.png
This is what I am building.... 这就是我正在建设的......
The reason I am asking for help to build the structure of what it appears I already built is because... 我要求帮助建立我已经建立的结构的原因是因为......
My Task modal DIV currently has a % based width for all 3 columns... 我的任务模式DIV目前所有3列的基于％的宽度......
As soon as I set my middle column to a Fixed 200px wide, it then starts to separate my wight column showing big gaps when I expand the browser and resize.... 一旦我将我的中间列设置为固定的200px宽，它就会开始将我的wyl列分开，当我展开浏览器并调整大小时显示大的间隙....
4 个解决方案
解决方案1
2 2015-06-25 05:01:41
CSS Width: calc() CSS宽度： calc()
.wrapper{
width: 100%;
}
.column-a, .column-c{
width: calc(50% - 100px);
}
.column-b{
width: 200px;
}
If browser doesn't support the calc expression using jquery 如果浏览器不支持使用jquery的calc表达式
$('.column-a, .column-c').css('width', '50%').css('width', '-=100px');
解决方案2
2 已采纳 2015-06-25 05:35:29
You can make it work by using calc() along with -moz-calc, -webkit-calc and -o-calc for older versions support of firfox, opera and webkit browsers because they don't support calc() property. 您可以使用calc（）以及-moz-calc，-webkit-calc和-o-calc来支持firfox，opera和webkit浏览器，因为它们不支持calc（）属性。 You can check the browser support table for calc() property in here - http://caniuse.com/#feat=calc 您可以在此处查看浏览器支持表中的calc（）属性 - http://caniuse.com/#feat=calc
and check the code in fiddle here - https://jsfiddle.net/zmbupv6v/1/ 并在这里检查代码 - https://jsfiddle.net/zmbupv6v/1/
HTML HTML
<html>
<body>
<div class='container'>
<div class='row'>
<div class='col1 cols'></div>
<div class='col2 cols'></div>
<div class='col3 cols'></div>
</div>
</div>
</body>
</html>
CSS CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
margin: 0 auto;
max-width: 900px;
width: 98%;
}
.row {
height: 100%;
width: 100%;
}
.cols {
float: left;
height: 100%;
overflow: scroll;
}
.col1, .col3 {
width: calc(50% - 100px);
width: -moz-calc(50% - 100px);
width: -webkit-calc(50% - 100px);
width: -o-calc(50% - 100px);
}
.col2 {
background-color: #000;
width: 200px;
}
解决方案3
0 2015-06-25 05:01:45
Inspect the width of wrapper div while you resizing the window. 在调整窗口大小时检查包装器div的宽度。 If the width of wrapper div is fixed for all resolutions then it will be fine for all screens even if you resize the screen. 如果包装div的宽度对于所有分辨率都是固定的，那么即使您调整屏幕大小，它也适用于所有屏幕。 In your case it seems that your wrapper div width is changing for different resolutions. 在您的情况下，您的包装器div宽度似乎正在针对不同的分辨率进行更改。 Please check it. 请检查一下。 (This issue is something related to responsive layout i guess) （这个问题与我猜的响应式布局有关）
The CSS written in the above answer can work and you can use max-width=900px; 在上面的答案中写的CSS可以工作，你可以使用max-width = 900px; for the wrapper with with width=100% . 对于宽度= 100％的包装器。
解决方案4
0 2015-06-25 20:46:30
You may wish to use the following 3 column layout which has a fixed width centre column and equal width flexible left and right columns. 您可能希望使用以下3列布局，其具有固定宽度的中心列和相等宽度的灵活左右列。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#W { position: absolute; width: 900px }
#X { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 110px 0 9px; left: 0; right: 50% }
#Y { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px -100px 0 -100px; left: 50%; right: 50% }
#Z { position: absolute; height: 600px; overflow: auto; padding: 9px; border: 1px solid red; margin: 9px 9px 0 110px; left: 50%; right: 0 }
</style>
<div id=W>
<div id=X>
Left content
</div>
<div id=Y>
Middle content
</div>
<div id=Z>
Right content
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.