无论屏幕大小如何，如何让内容占据整个页面？

Posted 2023-03-05

技术标签:

【中文标题】无论屏幕大小如何，如何让内容占据整个页面？【英文标题】：how to make content occupy whole page regardless of the screen size? 【发布时间】：2018-04-28 09:01:12 【问题描述】：

我是第一次为移动设备设计网页。我已经给出了 100% 的宽度和高度，因此无论手机屏幕大小如何，内容都会在整个页面上呈现。但是，正如您从屏幕截图中看到的那样，下方和右侧仍有空白区域。甚至我的一个复选框内容甚至超过了页面的宽度。我曾尝试将该内容放在 span 标签中并定义一个类并放置诸如 max-width: 20 px 之类的东西，但它没有任何效果。在我的 html 和 css 代码 sn-p 下方

/* style.css */
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";


body 
 margin: 0;
height: 100%;
width: 100%;


/* this page css */

mat-card
width: 100%;


img
padding: 2%;
text-align: center;
width:5%;
height: 5%;


.logo 
  margin: 10%;
 text-align: center;



.confirm-text 
max-width: 30px;
   display: block;



.example-container 
  display: flex;
  flex-direction: column;


.example-container>* 
  width: 100%;


.example-right-align 
  text-align: right;


input.example-right-align::-webkit-outer-spin-button,
input.example-right-align::-webkit-inner-spin-button 
  display: none;



.example-radio-group 
  display: inline-flex;
  flex-direction: column;

.checkbox 
display: block;
flex-direction: column;
padding-left:4%;



strong 
padding-left: 4%;

p 
  padding-left: 4%;



.example-radio-button 
  margin: 3%;


.example-selected-value 
  margin: 15px 0;

<mat-card><div class="logo">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRE3x0vsDn1R5O0v7QKVvJNMJK2txXUv8IIsY-2t4R8ore5AjMk0g" >
  <br>
  <br>
  <p>your return request has been confirmed. please tell us a convenient time to schedule the pick up</p>
</div></mat-card>
<mat-card class="login-form">
<form class="example-container" (ngSubmit)="onSubmit(f)" #f="ngForm">
  <strong>Pick up your preferred date</strong>
  <mat-radio-group class="example-radio-group" name="selectedDate" [(ngModel)]="selectedDate" required>
  <mat-radio-button class="example-radio-button"
     *ngFor="let date of dateOptions" [value]="date" ngDefaultControl>
    date
  </mat-radio-button>
</mat-radio-group>
<br><br>
<strong>Select a preferred time</strong>
<mat-radio-group
 class="example-radio-group" name="selectedTime" [(ngModel)]="selectedTime" required>
  <mat-radio-button class="example-radio-button"
    *ngFor="let time of timeOptions" [value]="time" ngDefaultControl>
    time
  </mat-radio-button>
</mat-radio-group>
<hr>
<mat-checkbox class="checkbox" name="confirmation" [(ngModel)]="confirmation" required>
  <span class="confirm-text">I confirm the above selected date and time as the preferred slot for return pick up.</span> 
</mat-checkbox>
<hr>
<button mat-raised-button color="accent"  type="submit"  [disabled]="!f.valid">Submit</button>
</form>
</mat-card>

编辑：这是 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Myntra</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet" /
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


</head>
<body>
  <app-root></app-root>
</body>
</html>

【问题讨论】：

// cmets 在 CSS 中无效。这条评论是我专门写在这里的，不是实际的css 请提供完整的 HTML，包括元标记，id 说查看视口并通过添加删除正文标记中的边距和填充。身体边距：0；填充：0； 【参考方案1】：

您还可以链接到像 Normalize.css 这样的 CSS 样式表，以删除浏览器的一些默认 CSS，并使您的页面在不同浏览器中看起来更加一致。只需确保在 Normalize.css 之后链接到您的主要 CSS 样式表。

https://necolas.github.io/normalize.css/

【讨论】：

【参考方案2】：

试试这个

    <div id="complete">
     Put your code here
    </div>
     html,body  height:100%; width:100%; margin:0; padding:0;
    #complete
       height:100%;
       width:100%;
       overflow:hidden;

如果你想有滚动条，那么你可以保持溢出为自动。不要错过正文之前的 html。希望这会有所帮助！

【讨论】：

【参考方案3】：

first // 不是 CSS 中的有效注释，使用 /* CODE */

简单地删除你的 % 值并将它们更改为 vh 和 vw :) 还向所有对象添加一些 css

vh 和 vw 的用户观点

*
padding: 0;
margin: 0;

还要添加这个 HTML 来定义视口

<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

【讨论】：

【参考方案4】：

我在 *** for HTML 选项中找到了这个： HTML5 Canvas 100% Width Height of Viewport?

为了使画布始终全屏宽度和高度，这意味着即使在调整浏览器大小时，您也需要在将画布大小调整为 window.innerHeight 和 window.innerWidth 的函数中运行绘制循环。

我在 *** 上找到了 jQuery 选项： Dynamically resize element with window size jquery

另外，请在 *** 上查看此内容，以获得对正确调整大小的额外支持Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

【讨论】：

以上是关于无论屏幕大小如何，如何让内容占据整个页面？的主要内容，如果未能解决你的问题，请参考以下文章

你如何让背景图像快速缩放到屏幕大小？

html 使视频显示在页面的背景中，并使视频占据整个屏幕的大小。

如何让一张图片占满整个屏幕

如何添加CSS让页面自适应手机屏幕

无论设备如何，如何使 UIImageView 占据屏幕的固定百分比？

css 关于width：100%的问题本身的页面超过了整个屏幕的大小，也就是有滚动条，但是它只能覆盖屏幕大小