相关疑难解决方法(0)
如何使div 100%的浏览器窗口高度？
我有一个有两列的布局 - 左边div和右边div.
右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.
我试过了height:100%,min-height:100%;等等
2016
推荐指数
推荐指数
33
解决办法
解决办法
186万
查看次数
查看次数
为什么不高度:100%工作将div扩展到屏幕高度？
我希望旋转木马DIV(s7)扩展到整个屏幕的高度.我不知道它为什么没有成功.要查看该页面,您可以访问此处.
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a> …264
推荐指数
推荐指数
6
解决办法
解决办法
37万
查看次数
查看次数
CSS - 为什么百分比高度不起作用？
为什么百分比值height不起作用,但百分比值width呢？
例如:
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
最终的宽度为#working视口的80%,但最终的高度为#not-working0.
219
推荐指数
推荐指数
5
解决办法
解决办法
22万
查看次数
查看次数
Css高度百分比不起作用
我有以下简单的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Live Feed</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
I should be tall
</div>
</body>
</html>但是div不会显示高度为100%.为什么？
129
推荐指数
推荐指数
5
解决办法
解决办法
21万
查看次数
查看次数
为什么百分比高度不适用于我的div？
我有两个高度为90%的div,但显示效果不同.
我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.
有人能解释我为什么会遇到这个问题吗？
以下是我的代码:
<div style="height: 90%">
<div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>
<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>
<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
</div>
</div>
48
推荐指数
推荐指数
2
解决办法
解决办法
5万
查看次数
查看次数
Div百分比高度
可能重复:
百分比高度HTML 5/CSS
这需要一个简单的但我为什么以div的百分比指定的高度不适用于它.
例如:
<div class="container">
adsf
</div>
CSS:
.container
{
width:80%;
height:50%;
background-color:#eee;
}
当我将高度从%更改为px时,它可以完美地运行.%与px一样有效,但为什么只有px有效而%无效.这是jsfiddle
编辑 虽然在原始问题50%之后我错过了分号,这完全破坏了它.事实上,我打算问的是为什么50%不会使它消耗50%的容器.它的高度仅取其高度而不是其容器的50%.
23
推荐指数
推荐指数
1
解决办法
解决办法
11万
查看次数
查看次数
为什么我的div高度100%仅在移除DOCTYPE时才起作用？
这是整个代码:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
什么也没出现.但是,如果我删除第一行(the doctype),则所有页面都是预期的绿色.
我有两个问题:
- 如何
div在不删除标签的情况下填充页面？ - 为什么删除
doctype它使它工作？
21
推荐指数
推荐指数
4
解决办法
解决办法
5360
查看次数
查看次数
身高不足100%页面高度
我无法想出这个.我有一组简单的div,包括标题,侧边栏和内容区域.标题是全宽,侧面和内容向左浮动.
我需要侧边栏(用于背景)来填充100%的页面高度,但是当我检查chrome中的元素时,<body>实际上是在页面底部之前很久结束,这似乎限制了我的侧边栏的高度.
什么阻止<body>填写整页？
?<body>
<div id="head">
</div>
<div id="sidebar">
<div>
<div id="menu">
<ul>
<li><a href="/dashboard.php"><img src="/img/blank.png" alt="home" id="home_ico">Home</a>
</li>
<li class="admin"><a><img src="/img/blank.png" alt="home" id="users_ico">Users</a>
<ul class="submenu" style="display: none;">
<li><a href="/users">Manage users</a></li>
<li><a href="/users/add.php">Add a user</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="clients_ico">Clients</a>
<ul class="submenu" style="display: none;">
<li><a href="/client_orgs">Manage clients</a></li>
<li><a href="/client_orgs/add.php" class="admin">Add a client</a></li>
</ul>
</li>
<li class=""><a><img src="/img/blank.png" alt="home" id="projects_ico">Projects</a>
<ul class="submenu" style="display: none;">
<li><a href="/projects">Manage projects</a></li>
<li><a href="/projects/add.php" class="admin">Create a project</a></li>
<li></li>
<li><a href="/projects/submitted.php" …18
推荐指数
推荐指数
5
解决办法
解决办法
5万
查看次数
查看次数
在 Blazor 上启动 Google 地图
我正在尝试使用 JSInterop 在我的服务器端 Blazor 应用程序上启动 Google 地图。我似乎已经尝试了几乎所有方法，但无法显示地图。不幸的是，互联网上几乎没有关于它的样本，因为它是一个相当新的框架，而且我自己也同样刚刚开始接触 Blazor，所以我可能做错了很多事情。任何朝着正确方向的推动将不胜感激。
在我的组件文件中，我有：
@page "/MapTest"
@inject IJSRuntime JSRuntime
<style>
#map {
width: 60%;
height: 60%;
}
</style>
<h1>Display Google Map</h1>
<div @ref="map" id="map"></div>
@code {
ElementReference map; // reference to the DIV
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("Showgooglemap", null);
//StateHasChanged();
}
}
在我的 _Host.cshtml 文件中，我有：
<script src="_framework/blazor.server.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxmykeyxxx&v=3"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
var options = {
zoom: 14, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP …12
推荐指数
推荐指数
1
解决办法
解决办法
5126
查看次数
查看次数
为什么我的Grid元素的高度没有正确计算？
我遇到了CSS网格元素的高度问题.我使用的代码是:
.gridContainer {
border: thin solid black;
background: rgba(255, 0, 0, 0.5);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 100px;
height: 100px;
grid-template-areas: 'windowContentHolder';
}
.gridItem {
grid-area: windowContentHolder;
background: rgba(255, 255, 0, 0.5);
width: 200%;
height: 200%;
}
.content {
background: rgba(255, 0, 0, 0.5);
}<div class="gridContainer">
<div class="gridItem">
<div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>
</div>
</div>如您所见,gridItem设置为height:200%,预期结果不符合预期.它应该是200px父(100px)的两倍(),滚动条隐藏任何额外的高度,而高度属性似乎根本没有设置.
似乎百分比正在考虑子高度而不是父高度,因为如果我们仔细检查元素,我们将看到它的高度是子元素高度的两倍.
带有'hi'的元素没有像预期的那样溢出.更改gridContainer为'block'确实可以正常工作,但不能使用'grid':
.gridContainer {
border: thin solid black;
background: rgba(255, 0, …10
推荐指数
推荐指数
2
解决办法
解决办法
596
查看次数
查看次数
标签 统计
css ×9
html ×8
height ×3
css-grid ×1
doctype ×1
html5 ×1
jsfiddle ×1
percentage ×1
quirks-mode ×1
width ×1