0
Я пытаюсь сделать страницу, которая подходит для одного экрана без прокрутки, но CSS, который определяет его формат, который у меня есть, не работает.Изображение растягивает экран вместо установки в div
Проблему можно увидеть в JSFiddle
Колонтитул закреплен в нижней части экрана (как это должно быть), но фоновое изображение (в пределах содержания) простирается от ниже заголовка, чтобы ниже нижний колонтитул.
Также возникает проблема с фоновым изображением при изменении размера браузера, но я уверен, что это будет исправлено при решении этой проблемы.
У меня есть следующий код:
HTML: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hide_these[hidden]).style.display='none';
$(".sidebar").slideToggle(600);
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Home
</h1>
</div>
<div class="sidebar">
<li><a href="#" onclick="return show('home');">Home</a></li>
<li><a href="#" onclick="return show('about');">About</a></li>
<li><a href="#" onclick="return show('projects');">Projects</a></li>
<li><a href="#" onclick="return show('contact');">Contact</a></li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
About
</h1>
</div>
<div class="sidebar">
<li><a href="#" onclick="return show('home');">Home</a></li>
<li><a href="#" onclick="return show('about');">About</a></li>
<li><a href="#" onclick="return show('projects');">Projects</a></li>
<li><a href="#" onclick="return show('contact');">Contact</a></li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Projects
</h1>
</div>
<div class="sidebar">
<li><a href="#" onclick="return show('home');">Home</a></li>
<li><a href="#" onclick="return show('about');">About</a></li>
<li><a href="#" onclick="return show('projects');">Projects</a></li>
<li><a href="#" onclick="return show('contact');">Contact</a></li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Contact
</h1>
</div>
<div class="sidebar">
<li><a href="#" onclick="return show('home');">Home</a></li>
<li><a href="#" onclick="return show('about');">About</a></li>
<li><a href="#" onclick="return show('projects');">Projects</a></li>
<li><a href="#" onclick="return show('contact');">Contact</a></li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<script>
$(function() {
$('body').addClass('loaded');
});
$(".menu-btn").on("click", function(){
$(".sidebar").slideToggle(600);
});
$(".header h1").delay(500).animate({"opacity": "1"}, 700);
</script>
</body>
</html>
CSS: main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:absolute;
}
#about, #projects, #contact{
width: 100%;
height:100%;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
color: white;
display:flex;
align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
}
.content p {
padding-top: -10px;
text-align: center;
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: absolute;
}
.footer a img {
position: relative;
top: -5px;
}
Моя попытка исправить была установка .content от высоты = [30px, -80px] (т. е. от верхней части нижнего колонтитула до нижней части заголовок).
Я новичок в CSS, поэтому я уверен, что это очень плохо отформатировано, поэтому извините заранее.
Спасибо всем, erip
https://css-tricks.com/perfect-full-page-background-image/ это должно помочь вам – Sai