Question

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

/* 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" alt="image">
  <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>

Answer 1

我在stackoverflow上找到了HTML选项： HTML5 Canvas 100% Width Height of Viewport?

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

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

另请参阅stackoverflow，以获得正确调整大小Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

的其他支持

Answer 2

首先//在CSS中不是有效的coments，使用/ * 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">

Answer 3

试试这个

    <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。希望这会有所帮助!!

Answer 4

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

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

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

4 个答案: