Блог

Главная - Вопросы по программированию - Слишком много места справа и снизу

Слишком много места справа и снизу

#html #css

#HTML #css

Вопрос:

У меня проблема, когда у меня слишком много места справа и внизу для моего сайта, это создает полосы прокрутки, которые позволяют прокручивать далеко.

проблема с прокруткой вправо находится в div «grid_container_ci», а для прокрутки снизу используется div «grid_container_footer».

Я пытался использовать поля, чтобы избавиться от этого, но безуспешно. Похоже, проблема возникла после того, как я добавил div «grid_container_ci». но даже сейчас, когда я закомментировал свой div «grid_container_ci», у меня все еще есть проблема с «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 amp; 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 amp; 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 HVACamp;R services for the marine amp; 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 HVACamp;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;
}

Ответ №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;
}

Ответ №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 amp; 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 amp; 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 HVACamp;R services for the marine amp; 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 HVACamp;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;
}

Ответ №3:

Спасибо за весь ваш вклад, мне не нравится просто копировать и вставлять ваш код в мой, поскольку мне нужно научиться изменять свой код, чтобы он был правильным, но, основываясь на всей вашей информации, с моим css было что-то явно не так, поэтому я удалил свою css-кодировку «.grid_container_ci» и закомментировал свой html, потому что это было хорошо, я смог исправить нижний колонтитул, когда я это сделал. после того, как я исправил нижний колонтитул, я добавил обратно свой html для «grid_container_ci», а затем снова начал работать, я не получал желаемых результатов и попытался изменить свой html для «grid_container_ci» на разные divs для текста и изображения, затем использовал «display-grid» в css, чтобы получить результат, который я искал, и я его получил. Ниже мой новый код, если кому-то интересно. Спасибо за информацию!

 <!-- 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 amp; 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 amp; 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);
}