Question

我不是制作精美网站的专家，而是我的新项目＆＃39;我希望在div＆＃34;容器页面中提供所有内容。自动填充浏览器（或屏幕）的总高度？我尝试了这个，但只有第一个div中的信息＆＃34; slide1＆＃34;被放置在浏览器的总高度上。 div＆＃34;菜单＆＃34;和第二个div＆＃34; slide1＆＃34;不是强制在浏览器的高度。有什么建议吗？

＆＃13;

<div id="container_page">
<div id="slide1" class="slide" data-slide="1" data-stellar-background-ratio="0.5" style="left: 0px; top: 0px;">
	<div class="overlay-background home-padding" style="left: 0px; top: 0; bottom: 0px; min-height: 350px;">
		<div class="container clearfix">
			<div class="grid_12">
				<div class="home-text">
				</div>
				<br></div>
		</div>
		<div class="box-shadow" >
		</div>
		</div>
</div>
<!-- Slide 1 End -->
<!-- Menu Start -->
<div class="menu" style="left: 0px; top: 0px;">
	<div class="container clearfix">
		<!-- Logo Start -->
		<div id="logo" class="left">
			<a href="#"><img alt="" src="images/logo.png"></a> </div>
		<!-- Logo End -->
		<!-- Navigation Start -->
		<div id="nav" class="right">
			<ul class="navigation">
				<li data-slide="1">Home</li>
				<li data-slide="2"><span lang="en-gb">Products</span></li>
				<li data-slide="4"><span lang="en-gb">Technology</span></li>
				<li data-slide="6"><span lang="en-gb">Company</span></li>
				<li data-slide="10">Contact</li>
				<li class="clear"></li>
			</ul>
		</div>
		<!-- Navigation End --></div>
</div>
<!-- Menu End -->
<!-- Slide 1 Start -->
<div id="slide1" class="slide" data-slide="1" data-stellar-background-ratio="0.5" style="background: url('images/slide-background.png'); z-index: 9900;">
	<div class="container clearfix">
		<div class="grid_12">
			<div id="core" class="wrapper">
				<div id="title_frontpage">
					<span lang="en-gb">Experts</span></div>
			</div>
			<!-- Button Bottom Start -->
			<div class="button-bottom">
				<a class="button" data-slide="2" title=""><span></span></a>
			</div>
			<div class="clear">
			</div>
			<!-- Button Bottom End --></div>
	</div>
</div>
</div>

＆＃13;

/*Clearing Floats*/
.cf:before, .cf:after{
    content: "";
    display: table;
}

.cf:after{
    clear: both;
}

.cf{
    zoom: 1;
}
/* Form wrapper styling */
.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 150px auto 50px auto;
    background: #444;
    background: rgba(0, 0, 0, .2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.form-wrapper button:hover{
    background: #e54040;
}

.form-wrapper button:active,
.form-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}

.form-wrapper button:before { /* Left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #c42f2f;
}

.form-wrapper button::-moz-focus-inner { /* Remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}

＆＃13;

Answer 1

也许你可以添加style =“width：100％; height：100％;”

将div高度设置为浏览器的高度

1 个答案: