Решил я попрактиковаться на Vue.js и сделал себе html, css для примера. У меня возникла проблема, что html вообще очень странно отображается.
И никак не могу их поставить на место
- Вообще не работает свойство height для body
- При width: 100% у body появляется полоса прокрутки
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="style.css">
<title>Уроки Vue.js</title>
</head>
<body>
<div id="vue">
{{ message }}
</div>
</body>
<script src="vue.js"></script>
<script src="script.js"></script>
</html>
CSS:
body {
background-color: rgb(255, 180, 153);
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px 0px 0px 0px;
}
#vue {
width: 45%;
height: 30%;
background-color: rgb(255, 144, 103);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
margin: 100px;
margin-left: 50%;
top: 50%;
left: 50%;
border-radius: 7px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
}