问题描述
我想创建类似这样的内容（固定img +滚动条）：
以下是我的网页：
我的问题是具有背景图像的div容器的高度。我必须设置一个值，但我不想设置一个值。我能做什么，该值会自动设置？
这两个div之间应该没有空格。
这里是代码：
* {font-family：Open Sans; margin：0px; padding：0px; font-size：18px;} html {height：100％;} body {height：100％;} nav {background：url（images / line-header.png）repeat-x scroll center bottom＃4A525A;填充：15px;位置：固定; top：0px;宽度：100％; } nav> ul {margin：0px; padding：0px; text-align：center;} nav ul>李{margin-left：25px;显示：inline-block; list-style-type：none;} nav ul li> {display：block;文字修饰：无;颜色：黑色;颜色：＃697683; transition：color 0.5s;} nav ul li> a：hover {color：#FFF;}。header-bg {background：url（'http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png' ）不重复; background-attachment：fixed;背景大小：100％; height：1000px; } .content {height：1000px;背景颜色：橙色;}
<！DOCTYPE html> ;< HTML> < HEAD> <标题>< /标题> < link rel =stylesheethref =index.css> <！ - Open Sans - > < link href ='http：//fonts.googleapis.com/css？family = Open + Sans'rel ='stylesheet'type ='text / css'> < /头> <身体GT; < NAV> < UL> < li>< a href =＃>连结1< / a>< / li> < li>< a href =＃>连结1< / a>< / li> < li>< a href =＃>连结1< / a>< / li> < / UL> < / NAV> < div class =header-bg>< / div> < div class =content> < H1>< / H1> < / DIV> < / body>< / html>
<脚本>
$（document）.ready（function（）{
var url = $（'＃header-bg'）。css（'background-image'）。replace（'url（'，'' ）.replace（'）'，''）.replace（'''，''）.replace（'''，''）;
var bgImg = $（'< img />'） ;
bgImg.hide（）;
bgImg.bind（'load'，function（）
{
var height = $（this）.height（）;
alert（height）;
$（'＃header-bg'）。css（'height'，height）;
}）;
$（'＃header-bg'）。 append（bgImg）;
bgImg.attr（'src'，url）;
}）;
< / script>
I want to create something like this (the fixed img + scroll): Page
And here is my page: MyPage
And my problem is the height of the div container with the background-image. I have to set a value, but i dont want to set a value. What can i do, that the value will set automatically?It should be no space between the two divs.
Here the Code:
*{
font-family: "Open Sans";
margin: 0px;
padding: 0px;
font-size: 18px;
}
html {
height: 100%;
}
body{
height: 100%;
}
nav{
background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
padding: 15px;
position: fixed;
top: 0px;
width: 100%;
}
nav > ul{
margin: 0px;
padding: 0px;
text-align: center;
}
nav ul > li{
margin-left: 25px;
display: inline-block;
list-style-type: none;
}
nav ul li > a{
display: block;
text-decoration: none;
color: black;
color: #697683;
transition: color 0.5s;
}
nav ul li > a:hover{
color: #FFF;
}
.header-bg{
background: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') no-repeat;
background-attachment: fixed;
background-size: 100%;
height: 1000px;
}
.content{
height: 1000px;
background-color: orange;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="index.css" >
<!-- Open Sans -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</nav>
<div class="header-bg"></div>
<div class="content">
<h1></h1>
</div>
</body>
</html>You want to get height of Background image and set to css by using jquery
http://jsfiddle.net/nikkirs/0h1fubea/
<script>
$(document).ready(function(){
var url = $('#header-bg').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
var height = $(this).height();
alert(height);
$('#header-bg').css('height',height);
});
$('#header-bg').append(bgImg);
bgImg.attr('src', url);
});
</script>
这篇关于与背景图像自动高度的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！