So, I have a html document, The BODY of the document is smaller than the HTML tag.
| Colors: | Element |
|---|---|
| Purple | Div inside the body |
| Green | Body |
| Orange | HTML |
| Libraries: |
|---|
| water.css |
Code:
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
* {
border:1px solid red;
}
#app,body,html {
height:100%;
width:100%;
margin:0;
padding:0;
}
#app {background:purple;}
body {background:green;}
html {background:orange;}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
</head>
<body>
<div id="app">
</div>
</body>
</html>Expected Result:
What I get:
CodePudding user response：
Debugging Steps:
You need to learn to use the Developer Tools in your browser. In Chrome, do the following:
- Right-click on the purple element
- Select "inspect"
- Scroll to the bottom of the "Styles" pane.
You will see the layout showing you the width and height of the content as well as margins, borders, padding, etc. You will see that the content area is set to be 800px. If you also select the "body" element in the Elements pane you will see that the body is set for a max-width of 800px. If you search your linked CSS file (water.css) for 800 you will also see that it has a max-width of 800px set. If you do not want it to be 800px, you need to change it or override it.
Order of Precedence:
Also, just in case you were not aware, when you have conflicting styles, whichever style is last in your code takes precedence. So, if you have the link to water.css file first (with max-width: 800px) and then after that in your own CSS you override with max-width: 100%, yours will take precedence. If on the other hand, you have your own styles first and the water.css second, the water.css styles will take precedence.