相关疑难解决方法(0)
使身体100%高度的浏览器窗口
我有这个结构:
<body>
<div id="header">..</div>
<div id="content">..</div>
<div id="footer">..</div>
</body>
这个CSS:
身体{颜色:白色; font-family:'Play',sans-serif; 最大宽度:2560px; 保证金:0自动; 最小宽度:960px; 高度:100%; 填充:0; }
#header {
position: relative;
overflow: hidden;
margin: 0 auto;
min-width: 960px;
height: 95px;
background-image: url("../images/header-bg.png");
}
#content {
margin: 0 auto;
position: relative;
max-width: 1600px;
height:100%;
overflow:hidden;
}
#footer {
background-color: #009EDB;
background-image: url("../images/footer-bg.png");
bottom: 0;
height: 30px;
margin: 0;
position: relative;
width: 100%;
}?
但不是body高度100%的浏览器窗口.我的问题是什么？谢谢.
推荐指数
解决办法
查看次数
Jquery.height()使用F5或CTRL + F5返回不同的结果
所以我试图找到我的图像的高度,然后添加一个上边距,这使我能够强加一个垂直中心.
我正在运行这个代码,并且在F5刷新时我得到了正确的高度但是在CTRL + F5刷新时它给了我一个更小的高度.我有点假设这是一个加载/延迟的东西,但我正在使用文档准备好所以不确定最新情况.我尝试使用php函数,但它让网站速度惊人,所以必须坚持使用jquery.
你可以看到它在这里工作.www.mzillustration.com
jQuery(document).ready(function() {
if (jQuery('.imagedisplay').length != 0) {
jQuery('.imagedisplay').each(function(){
var imgheight = jQuery(this).find('img').height();
var topmarg = ((240 - imgheight) / 2) ;
jQuery(this).find('img').css({'margin-top':topmarg+'px'});
});
});
任何想法/帮助/解释非常感谢.谢谢
推荐指数
解决办法
查看次数
如何获取浏览器窗口的高度,然后将div的高度设置为该值
所以,当我打开一个页面时,我想获得全高背景图像. 像这样
我还没有开始使用jquery,所以如果你能帮助我使用基本的js.这是我到目前为止所尝试的,但它没有用.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="assets/js/basic.js"></script>
<meta charset="UTF-8">
</head>
<body>
<header>
<div id="front-page" class="window_height_picture" onload="get_window_height()">
</div>
</header>
</body>
</html>
这是我的.js文件:
function get_window_height() {
var window_height = window.innerHeight;
document.getElementById('front-page').style.height = window_height + 'px';
}
我确实搜索过这个,但找不到我想要的东西.你能告诉我哪里错了,或者给我一个更好的代码.
推荐指数
解决办法
查看次数
容器与子元素的高度不同
容器只有屏幕高度的3/4左右,这与子元素的高度不同.
这是为什么？
我试图给容器和身体一个,min-height: 100%但这不起作用.即使!important
我不使用bootstrap,只是简单的html和CSS.
任何帮助非常感谢!
编辑:更改正文或html高度不起作用.这打破了页面.
我有一个带有以下CSS的正文:
body {
background-image: url("../img/1.png");
background-repeat: repeat;
background-size: cover;
font-family: "Raleway", sans-serif;
font-size: 20px;
font-weight: 300;
}
容器有这个CSS规则:
.container {
width: 900px !important;
margin: auto;
padding-left: 20px;
padding-right: 20px;
background-color: rgba(255, 255, 255, 0.3);
height: 100% !important;
}
我的标记看起来像这样:
<body>
<div class="container">
<div class="header">
<div class="lang">
<ul class="languages">
<li>DE</li>
<li>FR</li>
</ul>
</div>
<img src="img/header/royalpool.png" alt="" class="logo-royal"/>
<img src="img/header/bluetech.png" alt="" class="logo-bluetech"/>
<div class="lang">
<ul class="languages">
<li>Kontakt</li>
<li>Downloads</li>
<li>Händler</li>
</ul>
</div>
<ul …推荐指数
解决办法
查看次数
无论我做什么,我的div都不希望100%身高......:/
编辑:我发现由于一些奇怪的原因,我的#content继承了一个height属性.我不知道为什么,或者为什么要覆盖我试图设置的高度.:/
我做了很多关于这方面的研究,但我对css还不是那么好,所以我似乎无法弄明白.我正在为一个uni项目建立一个小网站,一切正常,除了一件事.内容div只是不想填写我告诉它的高度.
<body>
<div id="container">
<div class="logo"><img src="/Users/sophie/Dropbox/3 Uni/MultiEngI/Aufgabe 1/Acc/ArtArchiveLogo500.png" alt="ArtArchive" /></div>
<div class="header">ArtArchive</div>
<div id="nav"><li>
<ul>
<a href="#">Upload</a>
</ul>
<ul>
<a href="#">Organize</a>
</ul>
<ul>
<a href="#">Browse</a>
</ul>
</li>
</li></div>
<div id="content" style="height:100%;">I am empty :(</div>
<div class="footer">I am empty :(</div>
</div>
</body>
这是html部分,而且是css:
.header {
background:#c61350;
height: 100px;
line-height: 100px;
text-align: center;
padding:10px;
}
.header {
border-bottom: 12px solid #cd365b;
color: white;
font-size: 36px;
font-family: 'Lato',arial,sans-serif;
letter-spacing: 50px;
}
#content {
height : auto !important;
height : 100%;
min-height …推荐指数
解决办法
查看次数
在导航栏下创建一个 Div 填满所有空间
我正在使用 Bootstrap 制作一个网页，从顶部的水平导航栏开始，然后是一个带有背景图像和一些文本的 div。该封面后面是各种保存文本的容器。
我希望带有封面的 div 填充窗口上的剩余空间，即当您加载页面时，您只能看到导航栏，然后是封面，直到您滚动（如http://www.dagconseil.html 中所示）。 com/，除了我的封面不与导航栏重叠）。
到目前为止，如果我将相应的 div (.home-cover) 的位置设置为相对位置，我要么得到一个只有文本标题大小的封面：
或者如果我使用绝对定位，则覆盖整个页面直到最后的图像：
这也不是我想要的。
这是 CSS 的相关部分：
html {
position: relative;
min-height: 100%;
}
.navbar {
top: 0;
left: 0;
width: 100%;
}
.home-cover {
position:relative;
height:100%;
min-height:100%;
width:100%;
color: rgb(48,69,151);
}
.home-cover::before {
height:100%;
min-height:100%;
width:100%;
content: "";
background-position:center center;
z-index:0;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size: cover;
overflow:hidden;
background-image: url("img/home-cover.jpg");
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
.home-cover-header {
position: relative; …推荐指数
解决办法
查看次数
角度 100% 高度导致 0 高度
我正在开发我的第一个有角度的网站，我正在尝试创建一个填充屏幕其余部分的渐变 div。grad1当我设置渐变的高度时px，它工作得很好。但是，如果我使用 50% 或 100% 之类的百分比，或者只是让它设置默认高度，则会导致高度为零。可能是什么原因造成的？
我的组件.html
<div id="grad1"></div>
我的组件.css
#grad1 {
width: 100%;
background-color: #b0afb4; /* For browsers that do not support gradients */
background-image: linear-gradient(#b0afb4, #fff, #b0afb4); /* Standard syntax (must be last) */
}
应用程序组件.html
<div>
<app-home-display></app-home-display>
</div>
<router-outlet></router-outlet>
app-component.css 为空
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyWebApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
全局样式.css
body {
margin: 0;
}
推荐指数
解决办法
查看次数
div高度计算（100％-50px）不起作用
https://codepen.io/joshuajazleung/pen/EbbgBN
<div class="outer">
<div class="inner">
<img src="https://placehold.it/300x200" alt="">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio animi harum impedit ex esse labore, placeat, tempore sapiente nisi cupiditate fugiat soluta ullam dicta ducimus accusamus tenetur consequuntur nesciunt earum!</div>
</div>
</div>
.outer {
background: red;
position: relative;
height: calc(100% - 60px);
}
.inner {
position: relative;
top: -100px;
}
因为.inner移到顶部一点，以减少.out的总体空间，所以我使用
height: calc(100% - 50px); // my logic is that it's div's height minus 50px
但这不起作用，想知道为什么吗？
推荐指数
解决办法
查看次数