https://jsfiddle.net/nhgy11wx/
我有一个左列浮动，右列和这两个的包装。我在右侧列上有自动高度的textarea，但我也尝试了100％并且它没有获得包装div的全部高度。它下面的两个按钮应该在所有东西的底部对齐，这就是为什么我把它们放在主包装器外面，但它们也显示在它内部。
cvtpd2dq答案 0 :(得分：1)
如果您想为任何事情分配一个百分比width or height（即100%），那么经验法则是其父母需要width/height。
这意味着您html代码以及body代码，并且所有子代都需要指定width/height（无论是%还是px）以便下面的任何孩子都可以拥有height/width percents。
看一下这个例子http://jsfiddle.net/936ud8n5/3/
在这个小提琴中，标识为one的div是不可见的，因为我已经给它100％的高度，但它的父母（body和html）没有指定高度。但是，two内的div正在显示，因为two的高度为100px，因此其子div的高度为100%，但它显示出来。
另外，div是block级元素，因此它们会自动占用父容器的整个宽度。在这种情况下，它们所在的整个屏幕宽度都不需要指定宽度
答案 1 :(得分：0)
您必须添加jquery脚本来设置右侧textarea框的高度
$('#textarea1').css('height',$('#left_col').height());
您在css中有更新权限col类属性：
#right_col {
/*margin: 0 0 0 500px;*/
padding: 0 0 0 0;
text-align: left;
float:left;
}
答案 2 :(得分：0)
您的#wrapper div高度已经崩溃，因为您浮动了.left_col子div元素并将其从流中移除。包装器高度现在仅延伸到.right_col元素的底部，导致按钮直接显示在.right_col下方。您可以通过将display:table;添加到#wrapper或使用clearfix（请参阅下面的代码段）来解决此问题。
<强> Clearfix：
#wrapper:after {
clear: both;
content: "";
display: table;
}
带有clearfix的代码段。
$("*").addClass("ui-corner-all ui-widget");
$("input[type=submit]").button();
$("#ws_type_0").prop('checked','checked');
$("#ret_type_0").prop('checked','checked');
$("#ws_end").hide();
$("#ws_ns").hide();
$("#hp").hide();
$("input[name=ws_type]").on('change', function() {
if($(this).val()=="NOWSDL") {
$("#ws_end").show();
$("#ws_ns").show();
$("#ws_doc").hide();
}
else if($(this).val()=="WSDL") {
$("#ws_end").hide();
$("#ws_ns").hide();
$("#ws_doc").show();
}
});
$("input[name=ret_type]").on('change', function() {
if($(this).val()=="LIST") {
$("#kv").hide();
$("#vs").hide();
$("#hp").show();
}
else if($(this).val()=="STRING") {
$("#kv").show();
$("#vs").show();
$("#hp").hide();
}
});
var xmlstr = "";
xmlstr = "<CelsiusToFahrenheitResponse>\n <CelsiusToFahrenheitResult>77</CelsiusToFahrenheitResult>\n</CelsiusToFahrenheitResponse>";
$("#response").text(xmlstr);#wrapper {
width: 980px;
height: auto;
/* You can use this too - display:table; */
}
/* Clearfix */
#wrapper:after {
clear: both;
content: "";
display: table;
}
#wrapper div {
margin-top: 5px;
margin-bottom: 5px;
}
#bottom {
text-align: right;
}
td {
padding-top: 5px;
padding-bottom: 5px;
}
#ot_col1 {
width: 20%;
}
#opt_table {
width: 100%;
}
#ret_table {
width: 70%;
}
#rt_col1 {
width: 70%
}
#kv_txt {
width: 30%;
}
#vs_txt {
width: 30%;
}
#hp_txt {
width: 100%;
}
#ws_doc_txt {
width: 100%;
}
#ws_end_txt {
width: 100%;
}
#ws_ns_txt {
width: 100%;
}
#ws_op_txt {
width: 50%;
}
#ws_par_txt {
width: 50%;
}
#ws_val_txt {
width: 50%;
}
#left_col {
float: left;
width: 480px;
padding: 0 0 0 0;
}
#right_col {
margin: 0 0 0 500px;
padding: 0 0 0 0;
text-align: left;
}
textarea {
resize:none;
width: 100%;
height: 100%;
}
#button1 {
margin-top: 20px;
margin-bottom: 20px;
}
.greentxt {
color: green;
}
.redtxt {
color: red;
}
.vert_al {
vertical-align:bottom;
}
#status {
font-style:bold;
}<title>Settings</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<div id="wrapper">
<div id="left_col">
<fieldset><legend>Connection pconfiguration</legend>
<div>
<label>
<input type="radio" name="ws_type" value="WSDL" id="ws_type_0">WSDL</label>
<label>
<input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">Endpoint</label>
</div>
<div>
<table id="opt_table">
<tr id="ws_doc">
<td><label for="ws_doc">Document:</label></td>
<td><input type="text" name="ws_doc" id="ws_doc_txt">
</tr>
<tr id="ws_end">
<td><label for="ws_end">Endpoint:</label></td>
<td><input type="text" name="ws_end" id="ws_end_txt">
</tr>
<tr id="ws_ns">
<td><label for="ws_ns">Namespace:</label></td>
<td><input type="text" name="ws_ns" id="ws_ns_txt"></td>
</tr>
<tr id="ws_op">
<td id="ot_col1"><label for="ws_op">Operation:</label></td>
<td><input type="text" name="ws_op" id="ws_op_txt"></td>
</tr>
<tr id="ws_par">
<td><label for="ws_par">Parameter:</label></td>
<td><input type="text" name="ws_par" id="ws_par_txt"></td>
</tr>
<tr id="ws_val">
<td><label for="ws_val">Value:</label></td>
<td><input type="text" name="ws_val" id="ws_val_txt"></td>
</tr>
</table>
</div>
</fieldset>
<div>
<input type="submit" name="test" value="Test" class="vert_al">
<img class="vert_al" src="../Desktop/arrow_anim_left.gif" width="48" height="36" alt=""/>
<img class="vert_al" src="../Desktop/arrow_anim_left.gif" width="48" height="36" alt=""/>
<img class="vert_al" src="../Desktop/arrow_anim_left.gif" width="48" height="36" alt=""/>
<img class="vert_al" src="../Desktop/arrow_anim_left.gif" width="48" height="36" alt=""/>
<img class="vert_al" src="../Desktop/arrow_anim_left.gif" width="48" height="36" alt=""/>
<img class="vert_al" src="../Desktop/arrow_anim_left.gif" width="48" height="36" alt=""/>
<img class="vert_al" src="../Desktop/arrow_anim_left.gif" width="48" height="36" alt=""/>
</div>
<fieldset><legend>Return type</legend>
<div>
<label>
<input type="radio" name="ret_type" value="STRING" id="ret_type_0">String</label>
<label>
<input type="radio" name="ret_type" value="LIST" id="ret_type_1">List</label>
</div>
<div>
<table id="ret_table">
<tr id="kv">
<td id="rt_col1"><label for="kv">Key-value pair separator:</label></td>
<td><input type="text" name="kv" id="kv_txt">
</tr>
<tr id="vs">
<td><label for="vs">Value assignment symbol:</label></td>
<td><input type="text" name="vs" id="vs_txt">
</tr>
<tr id="hp">
<td><label for="hp">Hash path:</label></td>
<td><input type="text" name="hp" id="hp_txt"></td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="right_col"><span id="status">Status:</span><span id="err_resp"></span>
<div id="textarea1">
<textarea readonly="readonly" id="response"></textarea>
</div> <!--textarea-->
</div> <!--right column-->
</div> <!--wrapper div-->
<div id="bottom">
<input type="submit" name="Save" value="Save&Close"><input type="submit" name="Cancel" value="Cancel">
</div>