Блог

Главная - Вопросы по программированию - полосы прокрутки скрыты, и содержимое страницы отображается не полностью

полосы прокрутки скрыты, и содержимое страницы отображается не полностью

#html #css

#HTML #css

Вопрос:

Я сталкиваюсь с двумя проблемами, которые, как я могу предположить, связаны друг с другом. Моя веб-страница отображается не полностью, большая часть содержимого скрыта, а полоса прокрутки с правой стороны и вертикальная не отображаются. Я пытался решить это с помощью свойства overflow в теле, полоса прокрутки была там, но невидима, поэтому мне это не очень помогло. Я хочу, чтобы содержимое было видно, даже если я увеличиваю масштаб (200% или что-то еще)

вот фрагмент моего кода

 <nav class="sideBar">
        <div class="sideBarHeader" id="wrapper">
            <div class="dropdown">
            </div>
            <div class="ono">
                <p style="font-size: 48px;">XXX</p>
            </div>
        </div>
        <div style="padding-left: 2px;">
            <div class="searchContainer">
            </div>
        </div>
    </nav>
    <div class="mainContentClient">
        <div class="clientHeader">
        </div>
        <div class="clientContent"> <!-- the client content class is not defined yet -->
            <table class="onoTable paddedManagementTableContent thUpperCase">
                <tr>
                    <th style="height: 40px;"></th>
                </tr>
                <tr style="background-color: #DEDEDE; height: 100px;">
                    <td style="border-bottom: 0;">STATS</td>
                </tr>
            </table>
            <div style="height: 100%;" id="wrapper"> <!-- subcontent -->
                <!-- left tables -->
                <div class="leftClientContent">
                    <table class="onoTable paddedManagementTableContent thUpperCase">
                        <tr>
                            <th style="height: 40px;">
                                <a href="vehicle/">
                                </a>
                            </th>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0;"></td>
                        </tr>
                    </table>
                    <table class="onoTable paddedManagementTableContent thUpperCase">
                        <tr>        
                            <th style="height: 40px;">
                                <a href="cargounit/">
                                </a>
                            </th>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0;"></td>
                        </tr>
                    </table>
                </div>
                <!-- right table   Map -->
                <div class="rightClientContent">
                    <table class="onoTable paddedManagementTableContent thUpperCase">
                        <tr>        
                            <th style="height: 40px;" colspan="2">
                                info
                            </th>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0; width: 10%;"></td>
                            <td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0; width: 10%;"></td>
                            <td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0; width: 10%;"></td>
                            <td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0; width: 10%;"></td>
                            <td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0; width: 10%;"></td>
                            <td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0; width: 10%;"></td>
                            <td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0; width: 10%;"></td>
                            <td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
                        </tr>
                    </table>
                    <table class="onoTable paddedManagementTableContent thUpperCase">
                        <tr>        
                            <th style="height: 40px;">
                            </th>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0;"> <!-- map properties -->
                                <div id="Map" class="mapStyling"></div>
                                <script>
                                    var lat            = 47.35387;
                                    var lon            = 8.43609;
                                    var zoom           = 18;

                                    var fromProjection = new OpenLayers.Projection("EPSG:4326");   
                                    var toProjection   = new OpenLayers.Projection("EPSG:900913"); 
                                    var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);

                                    map = new OpenLayers.Map("Map");
                                    var mapnik         = new OpenLayers.Layer.OSM();
                                    map.addLayer(mapnik);

                                    var markers = new OpenLayers.Layer.Markers( "Markers" );
                                    map.addLayer(markers);
                                    markers.addMarker(new OpenLayers.Marker(position));

                                    map.setCenter(position, zoom);
                                </script>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

и css :

 .sideBar {
    height: 100%;
    width: 17%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #C0C0C0;
    max-width: 250px;
    min-width: 250px;
    overflow: auto;
}
.sideBarHeader {
    padding: 4% 8%;
    padding-left: 10%;
    height: 85px;
}
.clientHeader {
    font-size: 48px;
    height: 130px;
}
.mainContentClient {
    position: fixed;
    top: 0;
    height: 100%;
    width: 77%;
    margin: 0 280px;
}
.ono {
    width: 180px;
    text-align: right;
    /* keep the ono aligned, use a negativ margin*/
    margin-top: -28%;
}
.clientContent {
    height: 100%;
    width: 1130px;
    max-width: 1500px;
    min-width: 1000px;
}
.leftClientContent {
    width: calc(100% - 850px);
    margin-top: 2%;
}
.rightClientContent {
    width: 850px;
    margin-top: 2%;
    margin-left: 10px;
}
.mapStyling {
    width: 102.5%;
    height: 300px;
    margin-left: -20px;
}
/* default settings for the tables in part management*/
table.onoTable{
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
    table-layout: fixed;
}
table.onoTable th {
    background-color: #FBD85C;
    border-width: 0 10px;
    border-color: #f1f1f1;
    border-style: solid;
    height: 62.5px;
    font-size: 24px;
}
table.onoTable th:first-child {
    border-left: 0;
}
table.onoTable th:last-child {
    border-right: 0;
}
table.onoTable td {
    border-width: 0 10px 4px 10px;
    border-color: black #f1f1f1;
    border-style: solid;
    height: 50px;
    font-size: 24px;
}
table.onoTable td:first-child {
    border-left: 0;
}
table.onoTable td:last-child {
    border-right: 0;
}
/**/
table.noBorder_1_2 td:nth-child(1) {
    border-right: 0;
}
table.noBorder_1_2 td:nth-child(2) {
    border-left: 0;
}
table.centerContent_24 th, table.centerContent_24 td {
    text-align: center; 
    font-size: 24px;
}
tr.borderBottom_0 > td {
    border-bottom: 0;
}
.backgroundColor_grey {
    background-color: #DEDEDE;
}

/* shift the content of the main table of the management table a little bit to the right side*/
table.paddedManagementTableContent td {
    text-align: left;
    padding-left: 20px;
}
table.paddedManagementTableContent th {
    text-align: left;
    padding-left: 30px;
    width:30%;
}
table.paddedManagementTableContent th:first-child {
    text-align: left;
    padding-left: 20px;
}

вот живая демонстрация

https://jsfiddle.net/edwjvmsc/

спасибо всем!

Ответ №1:

Ну, я не уверен, что это будет правильный ответ. но я удалил свойство ‘position: fixed’ из класса ‘mainContentClient’, и полоса прокрутки отображается, и вы можете прокручивать свой контент. Попробуйте и дайте мне знать, помогло ли это :).

 .mainContentClient {
    top: 0;
    height: 100%;
    width: 77%;
    margin: 0 280px;
}

Комментарии:

1. Хорошо, это устранило проблему. Знаете ли вы, как я могу сохранить содержимое правой части, чтобы оно отображалось, даже когда я увеличиваю масштаб? поскольку при увеличении вертикальная полоса прокрутки отображается напрямую, я попробовал max-width внутри класса mainContentClient, но я не могу увеличить масштаб более чем на 140%, а затем появляется полоса прокрутки. Спасибо

2. Хорошо, я думаю, что вы ищете адаптивный веб-дизайн. Если вы хотите, чтобы содержимое вашего веб-сайта или раздела автоматически подстраивалось под размер экрана, вы можете попробовать это руководство. w3schools.com/css/css_rwd_intro.asp

3. w3schools.com/css/tryit.asp?filename=tryresponsive_col-s . Попробуйте настроить размер страницы, и вы увидите, что он подстраивается под размер экрана. Даже при масштабировании. Bootstrap лучше всего подходит для этих сценариев, чтобы обеспечить адаптивный дизайн. 🙂