Перегрузка CSS-x скрыта и переполнена.

Я прочитал это сообщение SO: css overflow-x visible и overflow-y скрытые причины полосы прокрутки

Также я прошел через: http://www.brunildo.org/test/Overflowxy2.html

Я хочу добиться чего-то следующим образом:

Overflow

Когда я попытался использовать следующий код:

overflow-x: hidden;
overflow-y: visible;

Это показывает что-то вроде следующего результата:
Overflow 2
Я не хочу, чтобы полоса прокрутки появлялась.

Есть ли у Jquery какое-либо решение для этого?

Ответы

Ответ 1

Вы можете сделать это с помощью CSS следующим образом:

HTML:

<div class="wrapper">
    <div class="inner">
    </div>
</div>

CSS

.wrapper{
    width: 400px;
    height: 300px;
}
.inner{
    max-width: 100%;
    overflow-x: hidden;
}

Теперь ваш div .wrapper будет иметь overflow: visible;, но ваш div .inner никогда не будет переполняться, потому что он имеет максимальную ширину в 100% от обертки div. Обратите внимание, что ваша обложка должна иметь явно определенную ширину.

Здесь - рабочий jsFiddle

Ответ 2

Посмотрите, чего вы пытаетесь достичь, невозможно в css и overflow не позволит вам этого добиться. Вместо этого вы можете использовать jquery для получения вывода, как показано на картинке/изображении.

Я не уверен, что вам нужно что-то вроде этого:

$('.horiz').width($('.container').width());

где .horiz - горизонтальная полоса и задает ширину ее ширины .container, которая содержит элементы.

Разметка HTML

<div class='container'>
    <div class='horiz'></div>
    <div class='vert'></div>
</div>

CSS

 .container {
    width:320px;
    height:320px;
    border:solid 5px green;
 }
 .horiz{
    width:500px;
    height:30px;
    background:red;
 }
 .vert{
    width:30px;
    height:500px;
    background:yellow;
    position:absolute;
    left:0;
    top:30px;
 }

JQuery

$(function(){
   $('.horiz').width($('.container').width());
});

и вывод его:

Проверить выход