0
https://jsfiddle.net/nhgy11wx/Правая колонка не получает полную высоту обертки DIV
У меня есть левый столбец плавающего, правый столбец и оболочка для этих двух. У меня есть textarea в правом столбце на авто высота, но я также пробовал 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>
спасибо за хорошее объяснение –