css - 如何删除未显示 div 的填充

我在删除我的一些 div 的填充时遇到了麻烦我已经在主页面创建了 fpr，但是当我在其他页面中隐藏 div 时，比如在关于我们页面中，隐藏的 div 的填充仍然存在显示。这是我正在处理的网站 http://mem-stockholm.se

正如您在主菜单中看到的，名为 bottom 的 div 具有 70 像素的内边距。

在其他子页面上，例如关于我们的“om oss”，其中底部 div 隐藏在 joomla 的选项中，填充仍然显示。

我尝试使用重置 CSS，但我遇到了同样的问题。

这是我的HTML

<html>

<head>

      <base href="http://mem-stockholm.se/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>MeM Stockholm - HEM</title>
  <link href="http://mem-stockholm.se/" rel="canonical" />
  <link href="/templates/memstockholm/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="/templates/memstockholm/css/style.css" type="text/css" />
  <link rel="stylesheet" href="/templates/memstockholm/css/component.css" type="text/css" />
  <link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
  <link rel="stylesheet" href="/modules/mod_slideshowck/themes/default/css/camera.css" type="text/css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans" type="text/css" />
  <style type="text/css">
#camera_wrap_94 .camera_pag_ul li img, #camera_wrap_94 .camera_thumbs_cont ul li > img {height:75px;}
#camera_wrap_94 .camera_caption {
    display: block;
    position: absolute;
}
#camera_wrap_94 .camera_caption > div {
    -moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;font-size: 12px;font-family:'Droid Sans';
}
#camera_wrap_94 .camera_caption > div div.slideshowck_description {
    font-size: 10px;
}

  </style>
  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/templates/memstockholm/js/main.js" type="text/javascript"></script>
  <script src="/templates/memstockholm/js/snap.svg-min.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script src="/media/system/js/modal.js" type="text/javascript"></script>
  <script src="/modules/mod_slideshowck/assets/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="/modules/mod_slideshowck/assets/jquery.mobile.customized.min.js" type="text/javascript"></script>
  <script src="/modules/mod_slideshowck/assets/camera.min.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery(window).on('load',  function() {
                new JCaption('img.caption');
            });
        window.addEvent('domready', function() {

            SqueezeBox.initialize({});
            SqueezeBox.assign($$('a.modal'), {
                parse: 'rel'
            });
        });
  </script>


</head>

<body>

    <div id="main" class="main">
        <div id="top" class="top">
            <div id="logo" class="">
                <a href="http://mem-stockholm.se">
                    <img src="/templates/memstockholm/img/logo.png" alt="MeM Stockholm Logo" title="MeM Stockholm Logo" style=" width: 240px" />
                </a>
            </div>
            <div id="menu" class="">
                <ul class="nav menu" id="Menu">
<li class="item-101 current active"><a href="/" >HEM</a></li><li class="item-107 divider deeper parent"><span class="separator">
    PRIVAT</span>
<ul class="nav-child unstyled small"><li class="item-110"><a href="/privat/hemstädning.html" >Hemstädning</a></li><li class="item-113"><a href="/privat/flyttstädning.html" >Flyttstädning </a></li><li class="item-111"><a href="/privat/storstädning.html" >Storstädning </a></li><li class="item-125"><a href="/privat/fönsterputsning.html" >Fönsterputsning </a></li></ul></li><li class="item-122 divider deeper parent"><span class="separator">
    FÖRETAG</span>
<ul class="nav-child unstyled small"><li class="item-123"><a href="/2015-04-02-22-05-44/kontorsstädning.html" >Kontorsstädning</a></li><li class="item-124"><a href="/2015-04-02-22-05-44/skolstädning.html" >Skolstädning</a></li><li class="item-112"><a href="/2015-04-02-22-05-44/trappstädning.html" >Trappstädning</a></li></ul></li><li class="item-108"><a href="/om-oss.html" >OM OSS</a></li><li class="item-109"><a href="/kontakt.html" >KONTAKT</a></li></ul>

            </div>
            <div style="clear:both"></div>
        </div>


        <div id="" class="slide">

        <!--[if lte IE 7]>
        <link href="/modules/mod_slideshowck/themes/default/css/camera_ie.css" rel="stylesheet" type="text/css" />
        <![endif]-->
        <!--[if IE 8]>
        <link href="/modules/mod_slideshowck/themes/default/css/camera_ie8.css" rel="stylesheet" type="text/css" />
        <![endif]--><script type="text/javascript"> <!--
       jQuery(function(){
        jQuery('#camera_wrap_94').camera({
                height: '499',
                minHeight: '',
                pauseOnClick: false,
                hover: 1,
                fx: 'random',
                loader: 'pie',
                pagination: 0,
                thumbnails: 0,
                thumbheight: 75,
                thumbwidth: 100,
                time: 7000,
                transPeriod: 1500,
                alignment: 'center',
                autoAdvance: 1,
                mobileAutoAdvance: 1,
                portrait: 0,
                barDirection: 'leftToRight',
                imagePath: '/modules/mod_slideshowck/images/',
                lightbox: 'mediaboxck',
                fullpage: 0,
                mobileimageresolution: '0',
                navigationHover: true,
                navigation: true,
                playPause: true,
                barPosition: 'bottom',
                container: ''
        });
}); //--> </script><!-- debut Slideshow CK -->
<div class="slideshowck camera_wrap camera_ash_skin" id="camera_wrap_94" style="width:960px;">
            <div data-thumb="/images/MeM_kev/th/slide1_th.jpg" data-src="/images/MeM_kev/slide1.jpg" >
                    </div>
        <div data-thumb="/images/MeM_kev/th/slide2_th.jpg" data-src="/images/MeM_kev/slide2.jpg" >
                    </div>
</div>
<div style="clear:both;"></div>
<!-- fin Slideshow CK -->

        </div>

        <div id="MainContent">
            <div class="item-page">




                                <h1 style="text-align: center;"><span style="font-size: 24pt;">Vi st&auml;dar &aring;t b&aring;de f&ouml;retag och privatpersoner i Stockholm </span></h1>
<p>&nbsp;</p>
<p style="text-align: center;">Gillar du, precis som jag, att komma hem till ett rent och fr&auml;scht hem efter en l&aring;ng dag p&aring; jobbet? Att f&aring; vistas p&aring; en plats d&auml;r du kan ladda batterierna igen? Oavsett om det g&auml;ller hemmet eller arbetsplatsen &auml;r det allm&auml;nt k&auml;nt att oreda och smuts &auml;r distraherande p&aring; ett mycket negativt s&auml;tt. Och alla vet vi hur sk&ouml;nt det &auml;r att vistas i en ren milj&ouml;, och hur tr&aring;kigt och tidskr&auml;vande det &auml;r att skapa denna p&aring; egen hand.</p>
<p style="text-align: center;">Detta &auml;r vi p&aring; MeM i Stockholm mycket medvetna om och erbjuder d&auml;rf&ouml;r st&auml;dhj&auml;lp i Stockholm av alla de slag som du kan utnyttja och s&aring;ledes f&aring; tid &ouml;ver till roligare saker &auml;n st&auml;dning. Hos oss arbetar endast speciellt utvalda st&auml;derskor som vi &auml;ven utbildar p&aring; egen hand, s&aring; att du som kund kan vara s&auml;ker p&aring; att f&aring; kompetent, p&aring;litlig och lyh&ouml;rd st&auml;dhj&auml;lp, antingen i hemmet eller p&aring; kontoret.</p>
<p style="text-align: center;"><br />MeM i Stockholm &auml;r det personliga st&auml;df&ouml;retaget i Stockholm med fokus p&aring; kundens behov och &ouml;nskem&aring;l. Genom att erbjuda ett komplett utbud av st&auml;dtj&auml;nster hoppas vi kunna hj&auml;lpa dig oberoende vilken st&auml;dhj&auml;lp du beh&ouml;ver</p>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="/om-oss.html" class="button1">more</a></p>

                         </div>

        </div>
  </div> <!-- this is the new div-->
        <div id="services" class="">


<div class="custom"  >
    <div class="container">
<section id="grid" class="grid clearfix">
<a href="/privat/hemstädning.html" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="/images/1.png" alt="" /> 
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Hemstädning</h2>
<p> Med hemstädning från oss får du tid över till annat för en låg kostnad</p>
</figcaption>
</figure>
</a>
<a href="/privat/flyttstädning.html" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure><img src="/images/3.png" alt="" /> 
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Fyttstädning</h2>
<p>lägga allt fokus på det nya boendet istället</p>
</figcaption></figure>
</a>
<a href="http://mem-stockholm.se/privat/fönsterputsning.html" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure><img src="/images/5.png" alt="" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Fönsterputsning</h2>
<p>Njut av utsikten genom rena fönster</p>
</figcaption></figure>
</a>
<a href="http://mem-stockholm.se/2015-04-02-22-05-44/kontorsstädning.html" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure><img src="/images/7.png" alt="" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
 <figcaption>
<h2>Kontorstädning</h2>
<p>I dagsläget hjälper vi en rad små o medelstora företag med att hålla rent på kontoret</p>
</figcaption></figure>
</a>
</section>
</div>
<!-- /container -->
<script>
            (function() {

                function init() {
                    var speed = 250,
                        easing = mina.easeinout;

                    [].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
                        var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                            pathConfig = {
                                from : path.attr( 'd' ),
                                to : el.getAttribute( 'data-path-hover' )
                            };

                        el.addEventListener( 'mouseenter', function() {
                            path.animate( { 'path' : pathConfig.to }, speed, easing );
                        } );

                        el.addEventListener( 'mouseleave', function() {
                            path.animate( { 'path' : pathConfig.from }, speed, easing );
                        } );
                    } );
                }

                init();

            })();
        </script></div>

        </div>
        <div style="clear:both"></div>

        <div id="bottom" class="">

            <div id="" class="user1">

            </div>

            <div id="" class="user2">


<div class="custom"  >
    <h2><span style="color: #333333;">RUT - avdrag</span></h2>
<p>Gl&ouml;m inte skattereduktion av hush&aring;llsn&auml;ra tj&auml;nster! Fr&aring;n och med den 1 juli 2009 g&auml;ller nya regler - nu f&aring;r du r&auml;tt till 50% skattereduktion&nbsp;p&aring; alla v&aring;ra tj&auml;nster</p>
<p><br /><a href="http://www.skatteverket.se/privat/fastigheterbostad/rotrutarbete.4.2e56d4ba1202f95012080002966.html" class="button1">more</a></p></div>

            </div>

            <div id="" class="user3">


<div class="custom"  >
    <h2><span style="color: #333333;">Alltid Samma St&auml;derska</span>
</h2>
<p>Vi ser till att du alltid f&aring;r samma st&auml;derska vid varje st&auml;dtillf&auml;llet. Allt f&ouml;r att du ska k&auml;nna dig trygg och bekv&auml;m och veta att st&auml;dningen sk&ouml;ts p&aring; det s&auml;tt du vill att den ska sk&ouml;tas.</p>
<p><br /><a href="http://mem-stockholm.se/kontakt.html" class="button1">Beställ</a>
</p></div>

            </div>
         <div style="clear:both"></div>   
        </div>

   <!-- </div> -->
    <div id="map" class="maps">


<div class="custom"  >
    <p><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2039.0955892513716!2d18.04974819999999!3d59.26455200000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f7762172c02eb%3A0xfe9518caa70f4f90!2sSt%C3%A5lbogav%C3%A4gen+36%2C+124+56+Bandhagen!5e0!3m2!1ssv!2sse!4v1428093376978" width="960" height="300" frameborder="0"></iframe></p></div>

    </div>
    <div id="footer" class="footer">
        MEM Stockholm &copy; 2015 All rights reserved | Designed by <a href="https://www.facebook.com/punkeb" target="_blank">Kevin Gr. Z</a><br/>
    </div>


</body>

</html>

这是我的 CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100);

body {
    padding-top:10px;
    max-width: 960px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #333333;
    font-size: 14px;
    line-height:25px;

}

#top{
    padding-top: 40px;

}



#logo{
    float: left;
}

#menu
{
    margin-top:15px;
    float: right;
    font-weight: 400;
    position: relative;
    z-index:1000;
    display:block;
    text-decoration:none;
    font-size:13px;
    line-height:32px;
    padding:0 15px;

}

#menu li.current {
    color:#fff;  
}


#menu ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#menu ul a
{
    display:block;
    color:#333333;
    text-decoration:none;
    font-size:13px;
    padding:0px;
}

#menu ul li
{
    position:relative;
    float:left;
    margin:0;
    padding-bottom: 5px;
    padding-left: 20px;
}

#menu ul li ul li:hover {

    background:#fff;
}
#menu ul li ul li { 
  background: #34646B; 
  display: block;

}
#menu a:hover {
  background: #fff;
  color: #34646B;
}

#menu ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
}

#menu ul ul li
{
    float:none;
    width:125px;
}

#menu ul ul a
{
    line-height:120%;
    padding:10px 15px;
    color: #fff;
    font-weight: 300;
}

#menu ul ul ul
{
    top:0;
    left:100%;
}

#menu ul li:hover > ul
{
    display:block;

}

.slide{
    padding: 45px 0px 60px;

}

.button1, .button2, .button3  {
    background-color:#333333;
    display:inline-block;
    color:#ffffff;
    font-size:15px;
    font-weight:300;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:100px;
    text-decoration:none;
    text-align:center;
    -webkit-transition-property: background;
       -moz-transition-property: background;
         -o-transition-property: background;
            transition-property: background;
    -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-transition-timing-function: linear;
       -moz-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
}

.button1:active {
    position:relative;
    top:1px;
}
.button1:hover {
    background-color:#34646B;
}


#services{
    padding: 60px 0px;

}

#bottom{
    padding: 70px 0px;
}


.user2{
    float: left;
    width: 450px;
}

.user3{
    float: right;
    width: 480px;
}

.user2, .user3{
    color: #505050;
    font-weight: 100;

}


#map{
    width: 100%;
    height: 300px;
    margin: 0 auto;
}

.maps {
        position: relative;
        height: 0;
        overflow: hidden;

    }
.maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 300px;
    }

#footer{
    text-align: center;
    font-size: 12px;
    color: #505050;
    text-decoration: none;
    padding: 20px;
    margin-top: 20px;


}

#footer a{
    text-decoration: none;
    color: #34646B;

}

最佳答案

如果你可以把这个 div 做成这样:

<div id="bottom" class="pagename"> $content </div>

然后您可以像这样在 CSS 文件中对其进行特殊处理

#bottom {
  padding 70px 0px;
}
.pagename {  //just to give it a name, no swedish here. :)
  display: none;
}

关于css - 如何删除未显示 div 的填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33378798/

css - 如何删除未显示 div 的填充

上一篇：html - 在我的案例中如何为元素设置边距

下一篇：css - 如果多背景，背景简写不起作用