Как я могу сделать ширину содержимого в моем вертикальном слайдере 100%?

Question

Я застрял на этом в течение нескольких часов (уже почти 5), я нашел действительно хороший учебник по горизонтальному слайдеру, который я пытался внедрить в свой веб-сайт, он работает хорошо во всех отношениях, за исключением того, что я не могу заставить контент идти полная ширина в слайдере. это только идет приблизительно 70% ширины. Я указал ширину: 100%; для содержания, и это ничего не делает.

.panel-group .panel div.survey {
    margin-left: 400px;
    margin-top: 400px;
    position: relative;
    width: 100%;
    right: 0px!important;
    border: 1px solid red;
}

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

jsfiddle Я что-то упускаю здесь очень просто? Любая помощь приветствуется

Answer 1

То, что вы называете "шириной", на самом деле является высотой панели.

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

Сначала определите ширину экрана, затем отрегулируйте высоту панели и, наконец, настройте высоту съемки. После игры с различными размерами окон я обнаружил, что работает следующее:

var width = $(window).width();
$(".panel-body").height(width);
$(".survey").css("width", width - 60);
$(".survey").css("margin-top", width - 70);

Также включите resize Функция так, что если пользователь изменяет разрешение экрана, панель будет регулировать:

$(window).resize(function(){
    var width = $(window).width();
    $(".panel-body").height(width);
    $(".survey").css("width", width - 60);
    $(".survey").css("margin-top", width - 70);
});

JS Fiddle Demo