当我更改窗口宽度大小时,为什么我的页脚会跳到页面的中心?

问题描述 投票:0回答:1

我无法用页脚解决问题。我想对页面进行响应式设计。当我使宽度为970且更小时,似乎我的所有元素都以图层的形式进入页面的中心,并忽略所有以前的属性作为边距或填充。但是当宽度超过970时,一切看起来都像我想要的那样。

我认为当窗口宽度较低时,它应该简单地拉伸或减小元件尺寸,而不是将所有东西放在一个地方..

这是页面的代码。

<body>
<div id="main" class="section-library">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <header class="section-library-header">
                    <h1 class="v1"><i class="ico-library"></i>Sections 
                      Library</h1>
                </header>
            </div>
            <div class="col-md-6">
                <div class="section-library-perex">
                    <p><big>Find tutorials, documentation, downloads, troubleshooting acrticles, and more...</big></p>
                </div>
            </div>
        </div>
    </div>
    <div id="slidingBox" class="hidden"></div>
    <header class="section-library-header">
        <div class="container">
            <h2>
                <span class="h4">Select Section</span>
                <div id="mobileSelect" class="hidden">
                    <a class="popup-section-toggle" title="Select Section">
                        <span class="arrow"></span>
                    </a>
                    <span id="sectionTypeSelect"></span>
                    <select id="sectionTypes" onchange="changeText();">
                    </select>
                </div>
                <div id="additionalSelect" class="">
                    <img src="images/selectArrow.png">
                    <select id="selectWBttn" onchange="separateButtons(this);">
                    </select>
                    <ul>
                    </ul>
                </div>
            </h2>
            <div class="header-image" id="main-icon">
                <img src="" alt="...">
            </div>
        </div>
        <div class="popup-section js-box-toggle-box">
            <ul class="reset">
                <li>
                    <a href="#">
                        <span class="profile-img">
                            <img src="" alt="...">
                        </span>
                        <span class="profile-name">Standardized: 
                    </a>
                </li>
                <li>
                        <span class="profile-img">
                            <img src="" alt="...">
                        </span>
                        <span class="profile-name">Build-up: 
   <strong>Steel</strong></span>
                    </a>
                </li>
                <li>
                        <span class="profile-img">
                        </span>
                        <span class="profile-name">Standardized: 
     <strong>Timber</strong></span>
                    </a>
                </li>
                <li>
                        <span class="profile-img">
                        </span>
                        <span class="profile-name">Parametric: 
     <strong>Thin-Walled</strong></span>
                    </a>
                </li>
            </ul>
            <ul class="reset">
                <li>
                     <span class="profile-img">
                            <img src="" alt="...">
                        </span>
                        <span class="profile-name">Standardized: 
              <strong>Steel</strong></span>
                    </a>
                </li>
                <li>
                      <span class="profile-img">
                            <img src="" alt="...">
                        </span>
                        <span class="profile-name">Build-up: 
        <strong>Steel</strong></span>
                    </a>
                </li>
                <li>
                        <span class="profile-img">
                        </span>
                        <span class="profile-name">Standardized: 
         <strong>Timber</strong></span>
                    </a>
                </li>
                <!--<li>
                        <span class="profile-img">
                        </span>
                        <span class="profile- 
  name">Parametric: <strong>Thin-Walled</strong></span>
                        </a>
                    </li>-->
            </ul>
        </div>
    </header>
    <div class="container container-section-library">
        <div class="row row-section-library">
            <div class="col-md-3 col-left-section-library">
                <div class="section-library-iconbox">
                    <ul class="reset crossroad-icons" 
  id="sectionCategories">
                    </ul>
                </div>
                <div class="box-std box-std--section-library white" 
  id="currentFilter">
                    <h4 class="std-header">Filter</h4>
                    <form data-ajax-form-action="xhr/selectbox.json" 
          class="form-std">
                        <div class="form-group">
                            <label for="inp-3-1">Region</label>
                            <div class="select">
                                <select name="inp-3-1" id="inp-3-1" 
               class="form-control">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inp-3-2">Manufacturer</label>
                            <div class="select">
                                <select name="inp-3-2" id="inp-3-2" 
                class="form-control">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inp-3-3">Standard</label>
                            <div class="select">
                                <select name="inp-3-3" id="inp-3-3" 
                    class="form-control" data-provide="dependecy" data- 
             dependency="#inp-3-2">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inp-3-4">Species</label>
                            <div class="select">
                                <select name="inp-3-4" id="inp-3-4" 
                       class="form-control" data-provide="dependecy" data-dependency="#inp-3-3" data- 
                 empty-value="Select...">
                                </select>
                            </div>
                        </div>
                        <p class="btn-wrap">
                            <button type="submit" class="btn btn-default 
            btn-submit">APPLY</button>
                            <button id="resetButton" type="reset" 
 class="btn btn-reset" onclick="sectionResult()">RESET</button>
                        </p>
                    </form>
                </div>
            <div class="col-md-9 col-main-section-library" id="sectionLayout">
                <div class="row">
                    <div class="col-lg-8 col-middle-section-library">
                        <h1 id="titleBox"></h1>
                        <p class="perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non sollicitudin magna. Morbi vitae semper augue. Mauris semper tempor interdum. Cras eget volutpat metus, nec facilisis justo.</p>
                    </div>
                </div>
                <div class="row second">
                    <div class="col-lg-8 col-middle-section-library">
                        <div class="box-section-library">
                            <h2 id="select-section-series" class="title title-list"><span class="letter-list">A.</span> Select section series</h2>
                            <table class="table-section-library scrolled-tbody">
                                <thead>
                                    <tr>
                                        <th class="tsl-check active">
                                            <label for="inp-all" class="inp-item" id="inp-1">
                                                <input name="inp-all" id="inp-all" type="checkbox" onclick="checkAll();">
                                                <span>inp-all</span>
                                            </label>
                                        </th>
                                        <th class="tsl-series active" onclick="sortSeries(this)">
                                            Series
                                            <!-- <span class="sort sort up"></span> -->
                                            <!-- <i class="arrow up" id="orderArrow"></i> -->
                                            <img class="sort-arrow" src="images/arrowWhite.png">
                                        </th>
                                        <th class="tsl-standard" onclick="sortSeries(this)">Standard
                                            <img class="hidden" src="images/arrowBlue.png">
                                        </th>
                                        <th class="tsl-manufacturer" onclick="sortSeries(this)">Manufacturer
                                            <img class="hidden" src="images/arrowBlue.png">
                                        </th>
                                        <th class="tsl-region" onclick="sortSeries(this)" style="text-align: center;">Region
                                            <img class="hidden" src="images/arrowBlue.png">
                                        </th>
                                        <th class="hidden" onclick="sortSeries(this)">Shape
                                            <img class="hidden" src="images/arrowBlue.png">
                                        </th>
                                        <th class="hidden" onclick="sortSeries(this)">Manufacturing Type
                                            <img class="hidden" src="images/arrowBlue.png">
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="sectionBody">
                                </tbody>
                            </table>
                        </div>
                        <div class="box-section-library box-section-library-material">
                            <span id="noResultWarn" class="hidden">No matches were found</span>
                            <p class="btn-wrap btn-wrap-inline">
                                <!-- btn-wrap btn-wrap-inline -->
                                <button type="button" class="hidden" id="addButton" disabled onclick='addSelectedProfiles(); hideShowButton();'>Add serie to the list</button> <!-- btn btn-default -->
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-right-section-library">
                        <div class="section-library-detailbox">
                            <div>
                                <h3 id="Picture-title"></h3>
                                <figure class="sl-detail-box--image">
                                    <img src="" alt="..." id="picture">
                                </figure>
                                <div class="inner-title">
                                    <h4 id='innerTitle'></h4>
                                </div>
                                <div class="inner-footer">
                                    <ul class="">
                                        <li><strong id='foot-standard'></strong></li>
                                        <li><strong id='foot-section'></strong></li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                        <p class="btn-wrap" ">
                                    <button onclick=" showSerieButton(this)" type="button" class="btn btn-default btn-lg" id>Show serie</button>
                        </p>
                    </div>
                </div>
                <div class="hidden">
                    <!-- row section-library-selected-profiles -->
                    <div class="col-lg-8 col-middle-section-library">
                        <h2 class="h1">Selected series</h2>
                        <div class="selected-profiles-box" id="profileList">
                        </div>
                        <p class="btn-wrap">
                            <button type="button" class="btn btn-default btn-lg" id="showButton" onclick="changeLayout(); readTableXml();" disabled>Show sections</button>
                        </p>
                    </div>
                </div>
                <div id="accessBar">
                    <p class="btn-wrap">
                        <button type="button" class="btn btn-inactive" id="showSelected" onclick="showSelected(); changeLayout(); " disabled="">
                            <!-- btn btn-default btn-lg -->
                            Show selected Section
                        </button>
                    </p>
                    <p class="reset-btn">
                        <button type="button" class="btn btn-inactive-reset" id="resetSelected" onclick="resetAllChecked('sectionBody');" disabled>
                            Reset Selected
                        </button>
                    </p>
                    <p class="btn-top" onclick="toTop();" title="To top">
                        <img src="images/toTopA.png">
                    </p>
                </div>
            </div>
        </div>
        <div class="hidden" id="slidingBar">
            <!-- row section-library-function-row -->
            <div id="tablesScroll">
                <div class="additional-scroll">
                </div>
            </div>
            <div class="col-md-7 section-library-function-row-box">
                <p class="btn-wrap">
                    <button id="selectedProfiles" class="btn btn-inactive" onclick="hideNotSelected()" disabled="">Show Selected Section</button> <!-- btn btn-white has-icon icon-eye -->
                    <button id="resetAllSelected" class="btn btn-inactive-reset" onclick="resetAllTableButton();" disabled=""><span>Reset Selected</span></button>
                </p>
            </div>
            <div class="col-md-5 section-library-function-row-box">
                <p class="btn-wrap" id="btnWrap1">
                    <button class="btn btn-white has-icon icon-arrange-h" onclick="arrangeColButton();" id="arrangeButton">Arrange table columns</button>
                </p>
                <!-- <p class="btn-top" onclick="toTop();" title="To top">
                                    <img src="images/toTopA.png">
                                </p> -->
                <p class="btn-wrap" id="btnWrap2">
                    <span class="title">Export:</span>
                    <a class="btn has-icon icon-pdf">PDF</a>
                    <a href="#" class="btn has-icon icon-xls" onclick="Exc(this);">XLS</a>
                    <!-- <span class="separator separator-v">|</span> -->
                </p>
                <p class="btn-wrap" id="btnWrap3">
                    <a href="#" class="btn has-icon icon-print">Print</a>
                </p>
            </div>
            <div class="hidden" id="arrangeTable">
                <table class="table-section-library table-horizontal">
                    <thead>
                        <tr id="arrangeColumns">
                        </tr>
                    </thead>
                </table>
                <a class="close" onclick="arrangeColButton();"></a>
            </div>
        </div>
    </div>

    <!-- ------------Footer begins----------------------- -->
    <div class="footer info">
        <div class="section-library-footer" onclick="visibleList('c')">
            <div class="section-library-footer-header">
                <div class="container">
                    <div class="row">
                        <div class="box-footer-header col-md-3">
                            <h3 class="title"><i class="ico-library"></i>Sections Library</h3>
                        </div>
                        <div class="box-footer-header col-md-4">
                            <h3 class="title">DUENQ</h3>
                        </div>
                        <div class="box-footer-header col-md-4">
                            <h3 class="title">DICKQ</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-library-footer-links">
                <div class="container">
                    <div class="row">
                        <div class="sl-box-footer-links col-md-3">
                            <div class="inner">
                                <div class="inner-body">
                                    <div class="inner-text">
                                        <div class="text">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa sit amet lectus
                                                euismod cursus. Aenean orci metus, venenatis commodo mauris vel.</p>
                                            <ul class="">
                                                <li>Standardized: <strong>Steel</strong></li>
                                                <li>Build-up: <strong>Steel</strong></li>
                                                <li>Standardized: <strong>Timber</strong></li>
                                                <li>Parametric: <strong>Thin-Walled</strong></li>
                                                <li>Cold-formed: <strong>Steel</strong></li>
                                                <li>Build-up: <strong>Timber</strong></li>
                                                <li>Parametric: <strong>Timber</strong></li>
                                                <li>Parametric: <strong>Massive</strong></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sl-box-footer-links col-md-4">
                            <div class="inner">
                                <div class="inner-body">
                                    <div class="inner-text">
                                        <div class="text">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa sit amet lectus
                                                euismod cursus.</p>
                                            <ul class="links">
                                                <li><a href="#">More information</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="illust">
                                        <img src="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sl-box-footer-links col-md-4">
                            <div class="inner">
                                <div class="inner-body">
                                    <div class="inner-text">
                                        <div class="text">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa sit amet lectus
                                                euismod cursus. Aenean orci metus, venenatis commodo mauris vel.</p>
                                            <ul class="links">
                                                <li><a href="#">More information</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="illust">
                                        <img src="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="to-top-link">
                <a class="js-to-top" onclick="toTop();">
                    <div class="arrow"></div>
                    <span class="text">Top</span>
                </a>
            </div>
            <div class="container">
                <div class="footer-top">
                    <div class="row">
                        <div class="col-md-2">
                            <h2 class="heading">Social</h2>
                            <div class="crossroad-social">
                                <ul class="reset">
                                    <li><a class="facebook" href="#"><span class="sr-only">Facebook</span></a></li>
                                    <li><a class="twitter" href="#"><span class="sr-only">Twitter</span></a></li>
                                    <li><a class="google" href="#"><span class="sr-only">Google+</span></a></li>
                                    <li><a class="linkedin" href="#"><span class="sr-only">LinkedIn</span></a></li>
                                    <li><a class="youtube" href="#"><span class="sr-only">YouTube</span></a></li>
                                    <li><a class="chat" href="#"><span class="sr-only"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- /.col-sm-2 -->
                        <div class="col-md-5 col-lg-6">
                            <h2 class="heading">Products</h2>
                            <div class="row">
                                <div class="col-sm-4">
                                    <ul class="reset links">
                                        <li><a href="#">Maecenas id nunc</a></li>
                                        <li><a href="#">Duis interdum dolor</a></li>
                                        <li><a href="#">Vestibulum facilisis</a></li>
                                        <li><a href="#">Aliquam justo</a></li>
                                        <li><a href="#">Nam vitae arcu vulputate</a></li>
                                        <li><a href="#">Aliquam varius diam eget</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="reset links">
                                        <li><a href="#">Maecenas id nunc</a></li>
                                        <li><a href="#">Duis interdum dolor</a></li>
                                        <li><a href="#">Vestibulum facilisis</a></li>
                                        <li><a href="#">Aliquam justo</a></li>
                                        <li><a href="#">Nam vitae arcu vulputate</a></li>
                                        <li><a href="#">Aliquam varius diam eget</a></li>
                                    </ul>
                                </div>
                                <div class="col-sm-4">
                                    <ul class="reset links">
                                        <li><a href="#">Maecenas id nunc</a></li>
                                        <li><a href="#">Duis interdum dolor</a></li>
                                        <li><a href="#">Vestibulum facilisis</a></li>
                                        <li><a href="#">Aliquam justo</a></li>
                                        <li><a href="#">Nam vitae arcu vulputate</a></li>
                                        <li><a href="#">Aliquam varius diam eget</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- /.col-sm-6 -->
                        <div class="col-md-5 col-lg-4">
                            <div class="box-footer-contact">
                                <h2 class="heading">Contacts</h2>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <p>
                                            <strong></strong> <br>

                                        </p>
                                        <p>

                                        </p>
                                    </div>
                                    <div class="col-sm-6">
                                        <p>
                                            <strong></strong> <br>

                                        </p>
                                        <p>

                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.footer-top -->
                <div class="footer-copy">
                    <div class="row">
                        <div class="col-md-5">
                            <p></p>
                        </div>
                        <div class="col-md-7 right">
                            <ul class="reset menu">
                                <li><a href="#">Impressum</a></li>
                                <li><a href="#">AGB</a></li>
                                <li><a href="#">Datenschutz</a></li>
                                <li><a href="#">Kontakt</a></li>
                                <li><a href="#">Sitemap</a></li>
                                <li><a href="#">Jobs</a></li>
                                <li><a href="#">Webshop</a></li>
                                <li><a href="#">Newsletter</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- /.footer-copy -->
            </div>
            <!-- /.container -->
        </div>
    </div><!-- /.container -->
    <!-- ---------------------------------------------Footer ends------------------------------------------ -->
</div>
</div><!-- /#main -->

由于巨大的css文件,JsFiddle真的很滞后,我很抱歉。

JsFiddle

我很喜欢HTML / CSS,所以我需要一些小技巧。

html css height margin
1个回答
0
投票

看起来你已经写了很多CSS代码,你甚至覆盖了现有的网格结构类,这是不推荐的。您可以在这里了解RWD的工作原理:https://developers.google.com/web/fundamentals/design-and-ux/responsive/

© www.soinside.com 2019 - 2024. All rights reserved.