我是网页设计的新手。我做了一个简单的网页DEMO左边是表格，右边是学习资源(使用 jQuery 显示)。这是我的标记:
<!DOCTYPE html>
<html>
<title>Membership Form</title>
<style>
td {
padding: 8px;
background-color: #ffffff;
}
table {
font-family: verdana,arial,sans-serif;
font-size:14px;
color:#333333;
}
h3{
font-family: verdana,arial,sans-serif;
text-align:center;
color: #808080;
}
input[type=text], textarea, input[type=radio] {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
font-family: verdana,arial,sans-serif;
padding: 3px 0px 3px 3px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus, input[type=radio]:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
font-family: verdana,arial,sans-serif;
padding: 3px 0px 3px 3px;
border: 1px solid rgba(81, 203, 238, 1);
}
input[type=submit], input[type=reset] {
padding: 14px 26px;
font-size: 14px;
line-height: 100%;
vertical-align: middle;
text-align: center;
cursor: pointer;
transition: background 0.1s ease-in-out;
-webkit-transition: background 0.1s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
color: #808080;
font-family: verdana,arial,sans-serif;
}
div{
border : solid;
border-width : 1px;
width : 45%;
height : 75%;
border-style : dashed;
border-color : #808080;
padding : 5px;
}
#form{
float : left;
}
#siteloader{
float : right;
}
object {
width: 100%;
height : 75%;
}
</style>
<body>
<h3> Membership Form</h3>
<!-- TABLE inside FORM, always -->
<!-- FORM contacts a CGI (Common Gateway Interface) which echos the submitted data -->
<div id = "form">
<form method = "post" action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<table>
<tr>
<td>First Name:</td>
<td>
<input type="text" size=50 placeholder="First Name" name="fName" required="true">
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<input type="text" size=50 placeholder="Last Name" name="lName" required="true">
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="male" required="true">Male</input>
<input type="radio" name="gender" value="female">Female</input>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<textarea rows=10 cols=50 name="address" placeholder="Address" required="true"></textarea>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input type="text" size=50 placeholder="Email" name="email" required="true">
</td>
</tr>
<tr>
<td>Contact:</td>
<td>
<input type="text" size=50 placeholder="Residence" name="residence" required="true"> <br>
<input type="text" size=50 placeholder="Mobile" name="mobile" required="true">
</td>
</tr>
</table>
<center>
<input type="submit" value="Submit"></input>
<input type="reset" value="Reset"></input>
<center>
</form>
</div>
<div id = "siteloader">
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#siteloader").html('<object data="http://www.w3schools.com/html/html5_form_attributes.asp"/>');
});
</script>
</html>
我有几个问题:
<div>即使我在 CSS 中声明它们都应为 75%，它们的高度也不同。 如何让它们都具有相同的高度？- 单击右侧的链接后，浏览器将打开一个新页面，留下我创建的页面。 如何确保在不离开我的页面的情况下进行浏览？
最佳答案
div 的样式指定了 75% 的高度，现在是什么的 75%？
添加这个声明
html,body{
height:100%;
}
关于jquery - 为什么 <div> 的高度不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22333007/