<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="bigtext.js"></script>
<style>
html {
height: 100%;
border-style: solid;
border-color: #58cdcd;
border-width: 1px;
}
body {
position: relative;
height: 100%;
border-style: solid;
border-color: #cd5858;
border-width: 1px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
text-align: center;
/*background-color: rgba(180, 215, 255, 0.096);*/
height: 30px;
vertical-align: middle;
color: #383535;
font-family: 'Great Vibes', cursive;
/*color: rgb(233, 181, 38);*/
border-style: solid;
border-color: #cacd58;
border-width: 1px;
}
.footer a {
font-family: 'Great Vibes', cursive;
vertical-align: middle;
color: #383535;
/*color: rgb(233, 181, 38);*/
}
.footer a:hover {
/* color: rgba(6, 31, 100, 0.425);*/
color: rgba(68, 68, 68, 0.781);
/*color: rgba(233, 181, 38, 0.671);*/
}
#page {
margin: 36px auto;
width: 90%;
border-style: solid;
border-color: #cacd58;
border-width: 1px;
padding-bottom: 100px;
}
.blog {
margin: 0 auto 53px;
width: 93, 75%;
/* 900px / 960px */
border-style: solid;
border-color: #58bbcd;
border-width: 1px;
}
.blog .main {
float: left;
width: 62.8888889%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.7777778%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.33333333%;
/* 48px / 900px */
border-style: solid;
border-color: #080806;
border-width: 1px;
}
.recent-entries {
margin: 0 auto;
width: 69.7885196%;
/* 231px / 331px */
}
.article {
padding: 0 8.48056537%;
/* 48px / 566px */
}
.date {
float: left;
margin: 24px 0 0 -17.0886076%;
/* 81px / 474px */
width: 14.556962%;
/* 69px / 474px */
border-style: solid;
border-color: #e7e725;
border-width: 1px;
}
</style>
</head>
<body>
<div id="page">
<div class="blog section">
<h1 class="lede">Recently in <a href="#">The Bot Blog</a></h1>
<div class="main">
<div class="article">
<div class="date">
<h1>34</h1>
</div>
<a>fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf</a>
</div>
</div>
<!-- /end .main -->
<div class="other">
<div class="recent-entries">
<a>fggggggggg
gggggggh ffffffffhgf hfgggggg
ggggggh fghf</a>
</div>
</div>
<!-- /end .other -->
</div>
<!-- /end .blog.section -->
</div>
<!-- /end #page -->
<div class="footer"><a>fOOTER</a>
</div>
</body>
</html>
-
html { overflow: hidden}. Но как тогда скролить страницу?– Владислав30 июн 2019 в 12:24
-
стандартные стили сбрасывать надо ...– Резидент Казахстана30 июн 2019 в 12:31
-
overflow: hidden, ну никак не скролить, но мне надо чтоб можно было скролить– Anrisssss30 июн 2019 в 12:34
3 ответа
Смотреть на полную страницу
В самый низ добавил вот это
html,body{
margin:0;
padding: 0;
box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="bigtext.js"></script>
<style>
html {
height: 100%;
border-style: solid;
border-color: #58cdcd;
border-width: 1px;
}
body {
position: relative;
height: 100%;
border-style: solid;
border-color: #cd5858;
border-width: 1px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
text-align: center;
/*background-color: rgba(180, 215, 255, 0.096);*/
height: 30px;
vertical-align: middle;
color: #383535;
font-family: 'Great Vibes', cursive;
/*color: rgb(233, 181, 38);*/
border-style: solid;
border-color: #cacd58;
border-width: 1px;
}
.footer a {
font-family: 'Great Vibes', cursive;
vertical-align: middle;
color: #383535;
/*color: rgb(233, 181, 38);*/
}
.footer a:hover {
/* color: rgba(6, 31, 100, 0.425);*/
color: rgba(68, 68, 68, 0.781);
/*color: rgba(233, 181, 38, 0.671);*/
}
#page {
margin: 36px auto;
width: 90%;
border-style: solid;
border-color: #cacd58;
border-width: 1px;
padding-bottom: 100px;
}
.blog {
margin: 0 auto 53px;
width: 93, 75%;
/* 900px / 960px */
border-style: solid;
border-color: #58bbcd;
border-width: 1px;
}
.blog .main {
float: left;
width: 62.8888889%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.7777778%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.33333333%;
/* 48px / 900px */
border-style: solid;
border-color: #080806;
border-width: 1px;
}
.recent-entries {
margin: 0 auto;
width: 69.7885196%;
/* 231px / 331px */
}
.article {
padding: 0 8.48056537%;
/* 48px /
566px */
}
.date {
float: left;
margin: 24px 0 0 -17.0886076%;
/* 81px / 474px */
width: 14.556962%;
/* 69px / 474px */
border-style: solid;
border-color: #e7e725;
border-width: 1px;
}
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="page">
<div class="blog section">
<h1 class="lede">Recently in <a href="#">The Bot Blog</a></h1>
<div class="main">
<div class="article">
<div class="date">
<h1>34</h1>
</div>
<a>fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf</a>
</div>
</div>
<!-- /end .main -->
<div class="other">
<div class="recent-entries">
<a>fggggggggg
gggggggh ffffffffhgf hfgggggg
ggggggh fghf</a>
</div>
</div>
<!-- /end .other -->
</div>
<!-- /end .blog.section -->
</div>
<!-- /end #page -->
<div class="footer"><a>fOOTER</a>
</div>
</body>
</html>
Задать следующие стили для body
:
width: 100vw;
overflow: hidden;
Далее обернуть всё в body
каким-нибудь элементом, у меня это div#wrapper
и ему задать следующие стили:
#wrapper {
width: calc(100vw + 30px); /* примерная ширина скролл бара */
padding-right: 30px;
height: 100vh;
overflow: hidden auto;
box-sizing: border-box;
}
Из этого мы получим некий "хак", который визуально уберёт вертикальный скролл, но оставит возможность скроллить страницу.
Вот демо:
html {
height: 100%;
border-style: solid;
border-color: #58cdcd;
border-width: 1px;
}
body {
position: relative;
height: 100%;
border-style: solid;
border-color: #cd5858;
border-width: 1px;
/* Добавить следующее */
width: 100vw;
overflow: hidden;
}
/* Добавить следующее */
#wrapper {
width: calc(100vw + 30px); /* примерная ширина скролл бара */
padding-right: 30px;
height: 100vh;
overflow: hidden auto;
box-sizing: border-box;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
text-align: center;
/*background-color: rgba(180, 215, 255, 0.096);*/
height: 30px;
vertical-align: middle;
color: #383535;
font-family: 'Great Vibes', cursive;
/*color: rgb(233, 181, 38);*/
border-style: solid;
border-color: #cacd58;
border-width: 1px;
}
.footer a {
font-family: 'Great Vibes', cursive;
vertical-align: middle;
color: #383535;
/*color: rgb(233, 181, 38);*/
}
.footer a:hover {
/* color: rgba(6, 31, 100, 0.425);*/
color: rgba(68, 68, 68, 0.781);
/*color: rgba(233, 181, 38, 0.671);*/
}
#page {
margin: 36px auto;
width: 90%;
border-style: solid;
border-color: #cacd58;
border-width: 1px;
padding-bottom: 100px;
}
.blog {
margin: 0 auto 53px;
width: 93, 75%;
/* 900px / 960px */
border-style: solid;
border-color: #58bbcd;
border-width: 1px;
}
.blog .main {
float: left;
width: 62.8888889%;
/* 566px / 900px */
}
.blog .other {
float: right;
width: 36.7777778%;
/* 331px / 900px */
}
.lede {
padding: 0.8em 5.33333333%;
/* 48px / 900px */
border-style: solid;
border-color: #080806;
border-width: 1px;
}
.recent-entries {
margin: 0 auto;
width: 69.7885196%;
/* 231px / 331px */
}
.article {
padding: 0 8.48056537%;
/* 48px /
566px */
}
.date {
float: left;
margin: 24px 0 0 -17.0886076%;
/* 81px / 474px */
width: 14.556962%;
/* 69px / 474px */
border-style: solid;
border-color: #e7e725;
border-width: 1px;
}
<div id="wrapper">
<div id="page">
<div class="blog section">
<h1 class="lede">Recently in <a href="#">The Bot Blog</a></h1>
<div class="main">
<div class="article">
<div class="date">
<h1>34</h1>
</div>
<a>fgggggggg
ggggggggh ffffffffhgf hfgggggg
ggggggh fghf</a>
</div>
</div>
<!-- /end .main -->
<div class="other">
<div class="recent-entries">
<a>fggggggggg
gggggggh ffffffffhgf hfgggggg
ggggggh fghf</a>
</div>
</div>
<!-- /end .other -->
</div>
<!-- /end .blog.section -->
</div>
<!-- /end #page -->
<div class="footer"><a>fOOTER</a>
</div>
</div>