Div怎么实现页面 "100%"的宽度和高度？_html/css

首页

web前端

html教程

Div怎么实现页面 "100%"的宽度和高度？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:02 PM

100div宽度页面高度

Div怎么实现页面 "100%"的宽度和高度？？？

现在是这样的有一个页面，有两个“Div”。

第一个Div是“100%”的高度和宽度，它的背景是纯色。希望它可以随着屏幕的大小，全屏显示。

.tyeet_login
{
    height:100%;
    width:100%;
    background-color:#3c611a;
}

第二个Div是登录框的主窗体，背景是一个图片。希望它可以在第一个层中水平居中和垂直居中显示。

.tyeet_login_mindle
{
    background:url(image/login.gif);
    width:800px;
    height:600px;
}

HTML：

回复讨论(解决方案)

问题：
第一个层不会全屏显示。

第二个层也不会全屏显示。

问题：
第一个层不会全屏显示。

第二个层也不会垂直居中显示，水平居中显示。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body,html{margin:0;height:100%;}.tyeet_login{     height:100%;    width:100%;    background-color:#3c611a;}.tyeet_login_mindle{    background:red;    width:800px;    height:600px;	position:absolute;	top:50%;	left:50%;	margin-left:-400px;	margin-top:-300px;}</style></head><body><div class="tyeet_login">              <div class="tyeet_login_mindle"></div> </div></body></html>

水平居中左右margin为auto就OK了,div的垂直居中好像用的比较少吧,貌似美工说垂直居中不符合人类的审美...如果一定想垂直可以用自适应的方法,把上下边距设置成百分比.

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何在Word中复制页面Feb 20, 2024 am 10:09 AM

是否要复制MicrosoftWord中的页面，并保持格式不变？这是一个聪明的想法，因为当您想要创建特定文档布局或格式的多个副本时，在Word中复制页面可能是一种有用的节省时间的技术。本指南将逐步引导您在Word中复制页面的过程，无论是创建模板还是复制文档中的特定页面。这些简单的说明旨在帮助您轻松地重新制作页面，省去从头开始的麻烦。为什么要在MicrosoftWord中复制页面？在Word中复制页面非常有益的原因有以下几点：当您有一个具有特定布局或格式的文档要复制时。与从头开始重新创建整个页面不同

处理Laravel页面无法正确显示CSS的方法Mar 10, 2024 am 11:33 AM

《处理Laravel页面无法正确显示CSS的方法，需要具体代码示例》在使用Laravel框架开发Web应用时，有时候会遇到页面无法正确显示CSS样式的问题，这可能会导致页面呈现不正常的样式，影响用户体验。本文将介绍一些处理Laravel页面无法正确显示CSS的方法，并提供具体的代码示例，帮助开发者解决这一常见问题。一、检查文件路径首先要检查CSS文件的路径是

3秒跳转页面实现方法：PHP编程指南Mar 25, 2024 am 10:42 AM

标题：3秒跳转页面实现方法：PHP编程指南在网页开发中，页面跳转是常见的操作，一般情况下我们使用HTML中的meta标签或者JavaScript的方法进行页面跳转。不过，在某些特定的情况下，我们需要在服务器端进行页面跳转。本文将介绍如何使用PHP编程实现一个在3秒内自动跳转到指定页面的功能，同时会给出具体的代码示例。PHP实现页面跳转的基本原理PHP是一种在

如何在iPhone上自定义和编辑待机模式：iOS 17的新功能Sep 21, 2023 pm 04:01 PM

待机是iOS17更新中的一项新功能，它提供了一种新的增强方式，可以在手机快速闲置时访问信息。通过StandBy，您可以方便地查看时间、查看即将发生的事件、浏览日历、获取您所在位置的天气更新等等。激活后，iPhone在充电时设置为横向时会直观地进入待机模式。此功能非常适合床头柜等无线充电点，或者在日常任务中离开iPhone充电时。它允许您轻扫待机中显示的各种小部件，以访问来自各种应用程序的不同信息集。但是，您可能希望根据您的偏好和您经常需要的信息修改这些小部件，甚至删除一些小部件。因此，让我们深入

如何快速刷新网页？Feb 18, 2024 pm 01:14 PM

页面刷新在我们日常的网络使用中非常常见，当我们访问一个网页后，有时候会遇到一些问题，比如网页加载不出来或者显示不正常等。这时候我们通常会选择刷新页面来解决问题，那么如何快速地刷新页面呢？下面我们就来探讨一下页面刷新的快捷键。页面刷新快捷键是一种通过键盘操作来快速刷新当前网页的方法。在不同的操作系统和浏览器中，页面刷新的快捷键可能有所不同。下面我们以常见的W

重新排列、禁用和删除 iPhone 主屏幕页面的方法Nov 29, 2023 am 08:22 AM

在iOS中，Apple允许您禁用iPhone上的单个主屏幕页面。还可以重新排列主屏幕页面的顺序，并直接删除页面，而不仅仅是禁用它们。这是它的工作原理。如何重新排列主屏幕页面触摸并按住主屏幕上的空格可进入抖动模式。轻点代表主屏幕页面的圆点行。在显示的主屏幕网格中，轻触并拖动页面以将其相对于其他页面重新排列。其他人会移动以响应您的拖拽动作。当您对新排列感到满意时，点击屏幕右上角的“完成”，然后再次点击“完成”以退出抖动模式。如何禁用或删除主屏幕页面触摸并按住主屏幕上的空格可进入抖动模式。轻点代表主屏

jQuery如何移除元素的height属性？Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

Word删除一页内容的方法介绍Mar 26, 2024 am 10:06 AM

标题：Word删除一页内容的方法介绍在使用MicrosoftWord编辑文档时，有时会遇到需要删除某一页内容的情况，可能是想删除文档中的一页空白页或者某一页不需要的内容。针对这种情况，我们可以采取一些方法来快速、有效地删除一页内容。接下来，将介绍一些在MicrosoftWord中删除一页内容的方法。方法一：删除一页内容首先，打开需要编辑的Word文档。定

See all articles