上部に固定リンク、下部に固定送信ボタンがあるサイトで作業しています。間のコンテンツは、を使用してスクロールできoverflow:autoます。
ブラウザー ウィンドウのサイズの高さを小さくすると、次の 2 つの問題に気付きます。
- スクローラーの高さはブラウザの高さによって変わりません。
- 高さを下げると、固定ボタンがスクローラーの上に表示されます
ボタンを常に固定位置に保ち、ブラウザの高さが変わったときにオーバーフローの高さを自動調整するにはどうすればよいですか?
ここで私の問題の JSFiddle デモンストレーションを作成しました -> MY JSFDDLeDEMO
私はFirefox 19.0とChromeバージョン26.0.1410.12とIE9を使用しています
JSfiddle での私のコードは次のとおりです。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow based Layout</title>
<style type="text/css">
<!--
/* Pretty Stuff */
/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}
body {
font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
h1 {
font-size: 2.4em;
font-weight: normal;
}
h2 {
font-size: 2.0em;
font-weight: normal;
}
p, li {
font-size: 1.4em;
}
h1, h2, p {
margin: 1em 0;
}
#branding h1 {
margin: 0;
}
#wrapper {
background-color: #fff;
}
#branding {
height: 50px;
background-color:#b0b0b0;
padding: 20px;
}
#form-b {
height: 500px;
overflow: auto;
position: fixed;
top: 164px;
width: 98%;
}
#mainNav {
list-style: none;
background-color:#eee;
}
#footer {
background-color:#b0b0b0;
padding: 1px 20px;
}
/* The Core Technique
================================= */
body {
text-align: center;
min-width: 1260px;
}
#wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
float: right;
}
#mainNav li {
/* width: 180px;
float: left; */
display:inline;
}
#submit-b {
border: 0px solid red;
bottom: 77px;
position: fixed;
text-align: cemter;
width: 100%;
}
#footer {
clear: both;
}
/* Add some padding
================================== */
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
position: fixed;
width: 100%;
}
#mainNav * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * * {
padding-left: 0;
padding-right: 0;
}
#content * {
padding-right: 20px;
}
#content * * {
padding-right: 0;
}
-->
/* fieldset styling */
fieldset {
margin: 1em 0;
/* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
background-color:#F5F5F5
}
/* legend styling */
legend {
font-weight: bold;
}
form p {
position: relative;
width: 100%;
}
/* style for labels */
label {
float: left;
width: 10em;
}
#remember-me label {
width: 4em;
}
/* style for required labels */
label .required {
font-size: 0.83em;
color:#760000;
}
/* style error messages */
label .feedback {
position: absolute;
margin-left: 11em;
left: 200px;
right: 0;
font-weight: bold;
color:#760000;
padding-left: 18px;
background: url(images/error.png) no-repeat left top;
}
/* :KLUDGE: Explicitly set the width for IE6- */
* html .feedback {
width: 10em;
}
input {
width: 200px;
}
input[type="text"], textarea {
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input.radio, input.checkbox, input.submit {
width: auto;
}
/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc;
}
input.radio {
float: left;
margin-right: 1em;
}
textarea {
width: 300px;
height: 100px;
}
/* Date of Birth form styling */
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
#yearOfBirth {
width: 5em;
}
/* Color form styling */
#favoriteColor {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
#favoriteColor h2 {
width: 10em;
float: left;
font-size: 1em;
font-weight: normal;
}
#favoriteColor div {
width: 8em;
float: left;
}
#favoriteColor label {
/*width: 3em;*/
float: none;
display: inline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="branding">
<h1>Branding</h1>
</div>
<div id="content">
<ul id="mainNav">
<li class="first">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Clients</a>
</li>
<li>
<a href="#">Case Studies</a>
</li>
</ul>
<div id="form-b">
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset>
<legend>Your Contact Details</legend>
<p>
<label for="author">Name: <span class="required">(Required)</span>
</label>
<input name="author" id="author" type="text" />
</p>
<p>
<label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span>
</label>
<input name="email" id="email" type="text" />
</p>
<p>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</p>
</fieldset>
<fieldset id="submit-b">
<legend></legend>
<p>
<input id="submit" class="submit" name="submit" type="submit" />
</p>
</fieldset>
</form>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>