gpt4 book ai didi

html - 滚动条向下和向右切割整个页面

转载 作者:太空宇宙 更新时间:2023-11-04 09:11:20 24 4
gpt4 key购买 nike

我正在制作一个网页作为我在学校的演示文稿的产品。现在,这不是我第一次遇到这个问题,但我的滚动条似乎从顶部和侧面切掉了一点。最重要的是,滚动条只有一半可见。

screenshot(请注意,顶部的黑色任务栏应该从左到右一直填满,并且应该紧贴顶部。)

<head>

<style type="text/css">

html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
left: -0.5%;
top: -8px;
width: 100.9%;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 20px 25px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #111;
}
textarea {
resize: none;
position: fixed;
left: 35%;
top: 1%;
width: 30%;
font-size: 160%;
height: 35px;
padding: 3px;
}
p {
font-size:20px;
font-family: arial;
position: absolute;
}

.underline {
border-bottom: 0.5px solid black;
display: inline-block;
line-height: 0.85;
}

</style>

<script type="text/javascript">

function clearContents(element) {
element.value = '';
}

</script>

</head>

<body>

<ul>
<li><a class="active" href="home.html" style="font-family: arial;">Ready2Job</a></li>
</ul>


<img src="http://res.cloudinary.com/urbandictionary/image/upload/a_exif,c_fit,h_200,w_200/v1396913907/vtimxrajzbuard4hsj78.jpg" style="position: absolute; left: 400px; top: 50px; z-index: -1; width: 60%;"> <!-- Grey Box -->

<textarea placeholder="Search for jobs"></textarea>

<img src="Billeder\home_noprofilepic.jpg" style="position: fixed; width: 70px; height: 70px;">

<p style="position: absolute; left: 80px; top: 41px;">Welcome, <i><span class="underline">Mikkel Mørkegaard</i></span><i>!</i></p>

<img src="Billeder\home_stars.jpg" style="position: fixed; width:180px; left: 50px; top: 75px;">

<a href="home.html"><p style="position: fixed; font-size: 10px; left:5px; top:125px;">(Edit profile)</p></a>


<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 80px;">

<img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 1000px;">



</body>

最佳答案

您可能只需要重置 body 标签中的边距。

所以尝试改变:

html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
}

收件人:

html, body {
position: fixed;
width: 100%;
height: 100%;
background-color: #cccccc;
overflow-x: hidden;
margin: 0px;
}

关于html - 滚动条向下和向右切割整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42098795/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com