个人中心
gpt4 book ai didi

html - 当所有内容都适合页面时，我的网站似乎可以滚动

转载 作者：太空宇宙 更新时间：2023-11-04 00:36:04 25 4
gpt4 key购买 nike

我的编码训练营元素有问题。

问题:我的网站似乎可以滚动，即使我的所有内容都适合页面。我曾尝试编辑高度，但它只会让整个网站乱七八糟。

有没有人有解决方案可以在不需要时阻止滚动？

非常感谢您。

罗伯·康诺利

html, body {
    height: 100%;
}

#wrap {
    margin: 0 auto;
    text-align: center;
    width: 960px;
    background-color: white;    
}

#firstName {
    color: white;
    margin: 0 auto;
    background-color: #4aaaa5;
    width: 300px;
    height: 85px;
    float: left;
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 250%;
    text-align: center;
    
} 

#menu {
    color: #777777;
    background-color: white;
    width: 300px;
    height: 85px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    float: right;
    line-height: 125px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

hr {
    clear: both;
    border-bottom-style: solid;
    margin: 0 auto;
    width: 100%;
    align-self: center; 
}


#backgroundTest {
    background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
    background-repeat: repeat;
    padding: 70px;
    height: 100%;
}

#wrap2 {
    margin: 0px auto;
    width: 960px;
    background-color: white;
    border: #dddddd;
    border-style: solid;
    border-width: .01em;
}

#aboutMeHeading {
    clear: both;
    color: #4aaaa5;
    margin: 15px 0 15px 15px;
}

#grayLine {
    margin: 15px auto;
    color: #dddddd;
    width: 930px;
    border-width: 1px;
    align-self: center;
}

#footerBox {
    margin-top: 50px;
    width: 100%;
    background-color: #666666;
    height: 2.5rem;
    border-top-style: solid;
    border-top-color: #4aaaa5;
    border-top-width: 10px;
    align-self: center;
    bottom: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    
}

#copyright {
    text-align: center;
    color: white;
    overflow: hidden;
}

body {
    margin: 0 auto;
}

#robImage {
    width: 200px;
    height: 200px;
    float: left;
    margin: 0px 15px 0px 15px;
}
p {
    color: #777777;
    text-align: left;
    margin-left: 15px;
    margin-right: 15px;
    word-spacing: 3px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5; 
   
}


#footerLine {
    color: #4aaaa5;
}


#cr1 {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rob Connolly's Portfolio</title>
    <link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">

</head>
<body>
    
<!-- this div contains the header-->
<div id="wrap">
    
    <header>
        <!-- name in header-->
        <h1 id="firstName">
            Rob Connolly
        </h1>
        
        <!-- Header-->
    <div id="menu">
            
            <span>
                About  &nbsp;
            </span>
            
            <span>
                Portfolio  &nbsp;
            </span>
        
            <span>
                Contact  &nbsp;
            </span>
        
    </div>
</div>
    </header>
         
    <!-- clear fix cleard float-->
<hr id="clearfix">
     
    <!-- background image-->
<div id="backgroundTest">

    <!-- Wrap2 wraps abouy me section-->
    <div id="wrap2">
   
        <!-- About Me Heading-->
        <h2 id="aboutMeHeading">
            About Me
        </h2>
            <!-- gray line in about me section-->
            <hr id="grayLine">

            <!-- Image of Rob-->
                <img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
                
                    <p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
                    </p>
    
                    <p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
                    </p>
    
                    <p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above. 
                                </p>
    </div>
</div>
    <!-- Start of footer-->
    <div id="footerBox">
        <!-- Text for footer-->
        <p id="cr1"> &copy; Copyright</p>
    
    </div>

</body>
</html>

最佳答案

要使其正常工作，您需要解决两件事。

  1. 首先设置您的 box-sizing 属性，因为您目前没有，因此您的框的大小会受到影响。 border-box是首选方法。如果你想更好地理解 border-box 的作用，你可以阅读 W3 Schools 的相关文章:https://www.w3schools.com/css/css3_box-sizing.asp
  2. 你的高度#backgroundTest元素是 100% 高度，因为它是 <body> 的直接子元素元素它将是那个高度。它比你想要的高 87 像素，因为 #wrap元素和其中的标题高度为 85px，加上 hr#clearfix那是 2px 的高度。如果你调整你的 #backgroundTest考虑到这一点，它将得到解决。将高度更改为 calc(100% - 87px)

在旁注中，我建议不要在您的 #footerBox 上添加设定高度元素，因为文本被截断了(高度不够，所以只需完全删除 height 属性，让它根据字体大小、行高、填充等创建自己的高度)

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

#wrap {
    margin: 0 auto;
    text-align: center;
    width: 960px;
    background-color: white;    
}

#firstName {
    color: white;
    margin: 0 auto;
    background-color: #4aaaa5;
    width: 300px;
    height: 85px;
    float: left;
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 250%;
    text-align: center;
    
} 

#menu {
    color: #777777;
    background-color: white;
    width: 300px;
    height: 85px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    float: right;
    line-height: 125px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

hr {
    clear: both;
    border-bottom-style: solid;
    margin: 0 auto;
    width: 100%;
    align-self: center; 
}


#backgroundTest {
    background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
    background-repeat: repeat;
    padding: 70px;
    height: calc(100% - 87px);
}

#wrap2 {
    margin: 0px auto;
    width: 960px;
    background-color: white;
    border: #dddddd;
    border-style: solid;
    border-width: .01em;
}

#aboutMeHeading {
    clear: both;
    color: #4aaaa5;
    margin: 15px 0 15px 15px;
}

#grayLine {
    margin: 15px auto;
    color: #dddddd;
    width: 930px;
    border-width: 1px;
    align-self: center;
}

#footerBox {
    margin-top: 50px;
    width: 100%;
    background-color: #666666;
    height: 2.5rem;
    border-top-style: solid;
    border-top-color: #4aaaa5;
    border-top-width: 10px;
    align-self: center;
    bottom: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    
}

#copyright {
    text-align: center;
    color: white;
    overflow: hidden;
}

body {
    margin: 0 auto;
}

#robImage {
    width: 200px;
    height: 200px;
    float: left;
    margin: 0px 15px 0px 15px;
}
p {
    color: #777777;
    text-align: left;
    margin-left: 15px;
    margin-right: 15px;
    word-spacing: 3px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5; 
   
}


#footerLine {
    color: #4aaaa5;
}


#cr1 {
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rob Connolly's Portfolio</title>
    <link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">

</head>
<body>
    
<!-- this div contains the header-->
<div id="wrap">
    
    <header>
        <!-- name in header-->
        <h1 id="firstName">
            Rob Connolly
        </h1>
        
        <!-- Header-->
    <div id="menu">
            
            <span>
                About  &nbsp;
            </span>
            
            <span>
                Portfolio  &nbsp;
            </span>
        
            <span>
                Contact  &nbsp;
            </span>
        
    </div>
</div>
    </header>
         
    <!-- clear fix cleard float-->
<hr id="clearfix">
     
    <!-- background image-->
<div id="backgroundTest">

    <!-- Wrap2 wraps abouy me section-->
    <div id="wrap2">
   
        <!-- About Me Heading-->
        <h2 id="aboutMeHeading">
            About Me
        </h2>
            <!-- gray line in about me section-->
            <hr id="grayLine">

            <!-- Image of Rob-->
                <img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
                
                    <p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
                    </p>
    
                    <p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
                    </p>
    
                    <p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above. 
                                </p>
    </div>
</div>
    <!-- Start of footer-->
    <div id="footerBox">
        <!-- Text for footer-->
        <p id="cr1"> &copy; Copyright</p>
    
    </div>

</body>
</html>

关于html - 当所有内容都适合页面时，我的网站似乎可以滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59381767/

25 4 0
文章推荐： html - 如何使导航响应？
文章推荐： c - C 中运算符优先级的奇怪结果
文章推荐： css - 使用 makeStyles 在另一个选定类中嵌套类
文章推荐： html - 我应该为一个元素使用什么选择器，这取决于伪元素的悬停行为？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com