переполнение x: скрытые причины вертикальной полосы прокрутки

Моя проблема в том, что когда я определяю overflow-x:hidden, это создает нежелательную полосу прокрутки.переполнение x: скрытые причины вертикальной полосы прокрутки

Я пытаюсь достичь чего-то подобного этому question.

Я пробовал предлагаемое решение, но это не сработало. Ниже мой код:

CSS и HTML:

.wrapper { 
 
    margin-top: 50px; 
 
} 
 

 
.menu_container { 
 
    color: #333; 
 
    text-align: center; 
 
    padding: 1em; 
 
    background: #607D8B; 
 
    width: 20%; 
 
    height: 30px; 
 
    overflow-x: hidden; 
 
} 
 

 

 
.submenu { 
 
    background: #E0E0E0; 
 
    height: 100px; 
 
    width: 50px; 
 
} 
 

 
.menu_list { 
 
    width: 300px; 
 
}

<body> 
 
    <div class="wrapper"> 
 
    <div class="menu_container"> 
 
     <div class="menu_list" align="left"> 
 
     Menu 1 Menu2 Menu 3 
 
     </div> 
 
     <div class="submenu"> 
 
     sub 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Вот JSFiddle ссылка.

источник

2015-04-22 abeprosper

вопрос, который вы связаны с переговоры о полосе прокрутки, которая не присутствует на вашем JSfiddle. Что именно вы хотели, чтобы ваш результат был? –

Что не получилось? –

Вопрос, на который вы ссылаетесь, говорит об удалении полосы прокрутки. Ваш вопрос непонятен, что вы хотите в качестве конечного результата. Просьба уточнить, что вы хотите, чтобы ваш конечный результат был –

Я вижу два пути для достижения своей цели:

1. Установить высота из .menu_container к авто

HTML остается, как это было, вот CSS:

.wrapper { 
margin-top: 50px; 
} 

.menu_container { 
color: #333; 
text-align: center; 
padding: 1em; 
background: #607D8B; 
width: 20%; 
height: auto; /* NEW */ 
overflow-x:hidden; 
} 

.submenu { 
background: #E0E0E0; 
height: 100px; 
width: 50px; 
display: none; /* I added this to show the effect when .submenu is invoked */ 
} 

.menu_container:hover .submenu { 
display: block; /* I added this to show the effect when .submenu is invoked */ 
} 

.menu_list { 
width: 300px; 
}

Просто наведите курсор на номер .menu_container: FIDDLE

Это решение позволит .menu_container расти, так что остальная часть содержания выталкивается вниз при .submenu показано.

2. Wrap .submenu в отдельном DIV и поместите его абсолютное

С помощью этого метода, то .menu_container не будет расти, так что следующий контент остается там, где она есть.

HTML:

<body> 
<div class="wrapper"> 
    <div class="submenu_container"> <!-- NEW --> 
    <div class="menu_container"> 
    <div class="menu_list" align="left"> 
    Menu 1 Menu2 Menu 3 
    </div> 
    </div> 
    <div class="submenu"> 
    sub 
    </div> 
    </div> 
</div> 
</body>

CSS:

.wrapper { 
    margin-top: 50px; 
    } 

    .menu_container { 
    color: #333; 
    text-align: center; 
    padding: 1em; 
    background: #607D8B; 
    width: 20%; 
    height: 30px; 
    overflow: hidden; 
    } 

    .submenu_container { /* NEW */ 
    position: relative; 
    } 

.submenu { 
background: #E0E0E0; 
height: 100px; 
width: 50px; 
position: absolute; /* NEW */ 
left: 20px; /* Adjust to your needs */ 
top: 40px; /* Adjust to your needs */ 
} 

.menu_list { 
width: 300px; 
}

Смотрите FIDDLE

источник

2015-04-22 07:42:52

Это СОВЕРШЕННО! Спасибо @zork media. К сожалению, я не могу выдвинуть ответ, так как у меня есть репутация, которая меньше 15. Я сделаю это в тот момент, когда достиг уровня репутации. Еще раз спасибо. – abeprosper

Рад это услышать. Кстати: как тот, кто просил вас, не должен проголосовать за ответ. Вы можете установить галочку под стрелками для голосования, чтобы принять ответ как «правильный». Это также скажет Stackoverflow, что проблема закрыта, и у вас есть достаточный ответ на ваш вопрос. –

Вы можете либо добавить html {overflow-y:hidden}, либо в свой CSS или добавить html {height:100%;}, чтобы удалить y-scrollbar (или это по крайней мере то, что, как я думаю, вы хотите выполнить).

Добавление html {overflow-y:hidden} будет делать то же самое, что и overflow-x, но удаляет полосу прокрутки y. Это может быть полезно для того, что вы пытаетесь выполнить, но его недостатком является то, что он скрывает весь контент, который простирается за 100% от высоты браузера.

Добавление html {height:100%;} к вашему CSS подскажет браузеру, что веб-страница составляет ровно 100% от размера браузера. Это переместит весь контент внутрь, чтобы он соответствовал всем на странице (если позиционирование не определяется пикселями, а не процентами). Недостатком этого метода является то, что нажатие всего содержимого внутрь может дать вам разные результаты в разных браузерах и размерах.

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

источник

2015-04-22 02:04:52

Спасибо за ответ @ShaunLoftin. Я действительно хочу, чтобы содержимое в направлении y было видимым. Разве {overflow-y: hidden} не справится с этим? Также причина, по которой я хочу, чтобы содержимое y было видимым, следующее: Представьте ситуацию, когда «Menu1», «Menu2» и «Menu3» являются элементами меню на панели навигации, а «sub» - это всплывающее меню, которое появляется, как только пользователь нажимает «Меню 1». Для лучшего удобства работы я хочу, чтобы div с «sub» отображался без полос прокрутки. – abeprosper

Затем используйте метод height, как я сказал, и медиа-запросы, чтобы определить вашу страницу на основе размеров браузера. –

переполнение x: скрытые причины вертикальной полосы прокрутки

ответ

Смежные вопросы