https://jsfiddle.net/nhgy11wx/
我有一个左列 float ，一个右列和一个用于这两个的包装。我在自动高度的右栏上有文本区域，但我也尝试过 100%，但它没有获得包装器 div 的完整高度。它下面的两个按钮应该在所有内容的底部右对齐，这就是为什么我把它们放在主包装器外面，但它们也显示在它里面。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Settings</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<style>
#wrapper {
width: 980px;
height: auto;
}
#wrapper div {
margin-top: 5px;
margin-bottom: 5px;
}
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;
}
</style>
</head>
<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>
</div>
</div> <!--wrapper div-->
<script>
$(document).ready( function() {
$("*").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);
});
</script>
</body>
</html>
最佳答案
当你想为任何东西分配一个百分比宽度或高度(即100%)时，经验法则是它的父级需要有一个宽度/高度。
这意味着您的 html 标签以及 body 标签和所有子标签都需要指定 width/height(无论是 code>% 或 px) 这样下面的任何 child 都可以有 height/width 和 percents。
看看这个例子http://jsfiddle.net/936ud8n5/3/
在这个 fiddle 中，id 为 one 的 div 是不可见的，因为我给它设置了 100% 的高度，但它的父项(body 和 html)没有指定高度。但是，two 中的 div 出现了，因为 two 的高度为 100px，所以它的子 div有高度 100% 但它显示出来了。
此外，div 是 block 级元素，因此它们会自动占据父容器的整个宽度。在这种情况下，它们是它们所在屏幕的整个宽度，因此无需指定宽度
关于jquery - 右列未获得包装器 div 的全高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31571545/