Question

我在网站的右侧和底部有太多空间时遇到了问题，它正在制作滚动条，使您可以滚动到很远的地方。

向右滚动的问题在“ grid_container_ci” div中对于底部滚动，是“ grid_container_footer” div。

我尝试使用页边距来消除它，但是没有成功。在我添加“ grid_container_ci” div之后，似乎出现了问题。但是即使现在我注释掉“ grid_container_ci” div时，“ grid_container_footer”仍然有问题。

<!-- Company Information --->
    <div class="grid_container_ci">
        <h3>Company Information</h3>
        <p>Incorporated in 2004, Rapid Marine HVAC (Asia Pacific)
           Pte Ltd<br>is one of Singapore’s largest Marine and Offshore
           service providers<br>for HVAC, Refrigeration and Mechanical
           Ventilation systems.</p>
        <p>We have decades of unique expertise and experience
           providing<br>comprehensive turnkey HVAC solutions to
           a wide range of Offshore<br>and Marine applications and
           also established an overseas network to<br>meet with the
           stringent demands of this vast industry.</p>
        <p>Our team of experienced engineers and operational staff
           with in-depth<br>knowledge of the Rules & Regulations
           of the standard classification<br>societies; Codes and
           Standards, we are able to provide our customers<br>with
           cost and time saving solutions meeting their budget and
           according<br>to their requirements.</p>
        <p>Today, Rapid Marine HVAC (Asia Pacific) Pte Ltd can
           support clients<br>from project feasibility study through
           actual execution safely, rapidly,<br>on time and within
           budget. This execution of extensive and complex<br>projects
           is now our core business.</p>
        <p>We provide comprehensive turkey HVAC & Refrigeration,<br>
           Heat Exchanger and Heat Transfer solutions to a wide range<br>
           of Marine and offshore applications, including Tankers,<br>
           Bulkers, Container Vessels, Accommodation barges,<br>
           Multi-purpose Supply Vessels, FPSOs, Oilrigs, Platforms,<br>
           Pipe Laying Barges and Offshore Accommodation<br>
           modules.</p>
        <img class="platform" src="Oil_platform_P-51_(Brazil).jpg" alt="picture">
    </div>
    <!-- Footer section --->    
     <footer>
        <div class="grid_container_footer">
            <div class="vision">
                <h3>VISION</h3>
                <p>Our vision is to be the worldwide leader<br>in HVAC&R services for the marine & offshore industry.</p>
            </div>
            <div class="mission">
                <h3>MISSION</h3>
                <p>Our mission is to understand our<br> customers needs and provide them<br>with cost effective and reliable HVAC&R<br>solutions using innovative technology<br>and methods which put us at the<br>forefront of our industry</p>
            </div>
            <div class="contact_us">
                <h3>CONTACT US</h3>
                <p>30 Gul Lane<br>Singapore 629424<br>T:+65 6898 2775<br>F:+65 6898 2776<br>E:enquiry@rapidoffshoremarine.com</p>
            </div>
            <div class="news">
                <h3>NEWS</h3>
                <p></p>
            </div>
        </div>

.grid_container_footer {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    font-family: helvitica;
    font-size: 13px;
    color: white;
    background-color: rgb(15,55,123);
    margin-left: -7.7px;
    padding-bottom: -200px;
    width: 1519px;
}

.vision h3 {
    position: relative;
    left: 180px;
}

.vision p {
    position: relative;
    left: 75px;
}

.mission h3 {
    position: relative;
    left: 55px;
}

.contact_us h3 {
    position: relative;
    left: 2px;
}

.news h3 {
    position: relative;
    left: 70px;
}

.grid_container_ci {
    position: relative;
    font-family: helvitica;
    color: rgb(15,55,126);
    margin-bottom: -400px;
}

.grid_container_ci h3 {
    border-bottom: 4px solid rgb(15,55,126)
}

.platform {
    position: relative;
    left: 650px;
    bottom: 505px;
}

Answer 1

尝试以下CSS代码。可以解决您的问题。

.grid_container_footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    font-family: helvitica;
    font-size: 13px;
    color: white;
    background-color: rgb(15,55,123);
    margin-left: -7.7px;
    padding: 20px;
}

.grid_container_ci {
    font-family: helvitica;
    color: rgb(15,55,126);
    position: relative;
}

.grid_container_ci h3 {
    border-bottom: 4px solid rgb(15,55,126)
}

 .platform {
    position: absolute;
    top: 50px;
    right: 20px;
}

Answer 2

问题在于您的样式。不必要的填充和边距。选中此更新的。

* {
  box-sizing: border-box;
}

.grid_container_footer {
    display: flex;
    justify-content: space-around;
    font-family: Helvetica;
    font-size: 13px;
    color: white;
    background-color: rgb(15,55,123);
    width: 100%;
    padding: 20px 40px;
}

.grid_container_footer > div {
  margin: 10px;  
}

.vision h3 {
    position: relative;
}

.vision p {
    position: relative;
}

.mission h3 {
    position: relative;
}

.contact_us h3 {
    position: relative;
}

.news h3 {
    position: relative;
}

.grid_container_ci {
    position: relative;
    font-family: helvitica;
    color: rgb(15,55,126);
}

.grid_container_ci h3 {
    border-bottom: 4px solid rgb(15,55,126)
}

.platform {
    position: relative;
}

footer {
  width: 100%;
  position: relative;
  bottom: 0;
}

<div class="grid_container_ci">
    <h3>Company Information</h3>
    <p>Incorporated in 2004, Rapid Marine HVAC (Asia Pacific)
       Pte Ltd<br>is one of Singapore’s largest Marine and Offshore
       service providers<br>for HVAC, Refrigeration and Mechanical
       Ventilation systems.</p>
    <p>We have decades of unique expertise and experience
       providing<br>comprehensive turnkey HVAC solutions to
       a wide range of Offshore<br>and Marine applications and
       also established an overseas network to<br>meet with the
       stringent demands of this vast industry.</p>
    <p>Our team of experienced engineers and operational staff
       with in-depth<br>knowledge of the Rules & Regulations
       of the standard classification<br>societies; Codes and
       Standards, we are able to provide our customers<br>with
       cost and time saving solutions meeting their budget and
       according<br>to their requirements.</p>
    <p>Today, Rapid Marine HVAC (Asia Pacific) Pte Ltd can
       support clients<br>from project feasibility study through
       actual execution safely, rapidly,<br>on time and within
       budget. This execution of extensive and complex<br>projects
       is now our core business.</p>
    <p>We provide comprehensive turkey HVAC & Refrigeration,<br>
       Heat Exchanger and Heat Transfer solutions to a wide range<br>
       of Marine and offshore applications, including Tankers,<br>
       Bulkers, Container Vessels, Accommodation barges,<br>
       Multi-purpose Supply Vessels, FPSOs, Oilrigs, Platforms,<br>
       Pipe Laying Barges and Offshore Accommodation<br>
       modules.</p>
    <img class="platform" src="Oil_platform_P-51_(Brazil).jpg" alt="picture">
</div>
    <!-- Footer section --->    
     <footer>
        <div class="grid_container_footer">
            <div class="vision">
                <h3>VISION</h3>
                <p>Our vision is to be the worldwide leader<br>in HVAC&R services for the marine & offshore industry.</p>
            </div>
            <div class="mission">
                <h3>MISSION</h3>
                <p>Our mission is to understand our<br> customers needs and provide them<br>with cost effective and reliable HVAC&R<br>solutions using innovative technology<br>and methods which put us at the<br>forefront of our industry</p>
            </div>
            <div class="contact_us">
                <h3>CONTACT US</h3>
                <p>30 Gul Lane<br>Singapore 629424<br>T:+65 6898 2775<br>F:+65 6898 2776<br>E:enquiry@rapidoffshoremarine.com</p>
            </div>
            <div class="news">
                <h3>NEWS</h3>
                <p></p>
            </div>
        </div>

，并且我更新了.grid_container_footer。在这种情况下，我用flexbox替换了网格布局。

.grid_container_footer {
   display: flex;
   font-family: Helvetica;
   font-size: 13px;
   color: white;
   background-color: rgb(15,55,123);
   width: 100%; // change from fixed size to percentage
   padding: 20px 40px;
}

Answer 3

感谢您的所有输入，我不希望仅将代码复制并粘贴到我的代码中，因为我需要学习如何正确地更改我的代码，但是基于您的所有信息，显然存在问题我的css，所以我删除了.grid_container_ci“ css编码，并注释掉了我的html，因为这样做很好，能够在此基础上修复页脚。在修复页脚后，我又将HTML添加回了” grid_container_ci“然后又开始变本加厉，我没有得到想要的结果，并尝试将“ grid_container_ci”的html更改为文本和图像的不同div，然后在CSS中使用“ display-grid”来获得结果寻找，我明白了。如果有人好奇，下面是我的新代码。感谢您的输入！

<!-- Company Information --->
    <div class="grid_container_ci">
        <div class="ci">
            <h3>Company Information</h3>
            <p>Incorporated in 2004, Rapid Marine HVAC (Asia Pacific)
               Pte Ltd<br>is one of Singapore’s largest Marine and Offshore
               service providers<br>for HVAC, Refrigeration and Mechanical
               Ventilation systems.</p>
            <p>We have decades of unique expertise and experience
               providing<br>comprehensive turnkey HVAC solutions to
               a wide range of Offshore<br>and Marine applications and
               also established an overseas network to<br>meet with the
           stringent demands of this vast industry.</p>
        <p>Our team of experienced engineers and operational staff
           with in-depth<br>knowledge of the Rules & Regulations
           of the standard classification<br>societies; Codes and
           Standards, we are able to provide our customers<br>with
           cost and time saving solutions meeting their budget and
           according<br>to their requirements.</p>
        <p>Today, Rapid Marine HVAC (Asia Pacific) Pte Ltd can
           support clients<br>from project feasibility study through
           actual execution safely, rapidly,<br>on time and within
           budget. This execution of extensive and complex<br>projects
           is now our core business.</p>
        <p>We provide comprehensive turkey HVAC & Refrigeration,<br>
           Heat Exchanger and Heat Transfer solutions to a wide range<br>
           of Marine and offshore applications, including Tankers,<br>
           Bulkers, Container Vessels, Accommodation barges,<br>
           Multi-purpose Supply Vessels, FPSOs, Oilrigs, Platforms,<br>
           Pipe Laying Barges and Offshore Accommodation<br>
           modules.</p>
        </div>
        <div class="image">
            <img class="platform" src="Oil_platform_P-51_(Brazil).jpg" alt="picture">
        </div>

.grid_container_ci {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    position: relative;
}

.grid_container_ci .image {
    position: relative;
    bottom: -60px;
}

.grid_container_ci .ci h3 {
    border-bottom: 4px solid rgb(15,55,123);
}

底部和底部的空间太大

3 个答案: