Адаптивное окно поиска и элементы внутри оболочки

0

У меня возникли проблемы с созданием отзывчивого блока с функцией поиска для мобильного сайта. Я планирую добавить функции jquery на этот сайт, поэтому я хочу создать внешнюю оболочку, затем поместить внутри оболочки уникальный элемент логотипа и уникальный элемент поиска. Когда я запускаю этот код, окно поиска имеет проблемы с высотой. Я бы хотел, чтобы высота была отзывчивой, а не статической.

HTML:

<head>
    <meta charset="utf-8">
</head>

<body>

    <style type="text/css">
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.outer-top{
    border: 1px solid black;
    }

.logo {
    border:1px solid black;
    text-align:center;
    float:left;
    width:25%;
    height: 15%;
    }
.searchbar {
    border:1px solid black;
    text-align:center;
    float:left;
    width:75%;
    height:15%;
    }

    </style>

    <div class="outer-top">
            <div class="logo">
                <p>logo</p>
            </div>
            <div class="searchbar">
                <input type="text" name="search"><input type="submit" value="Search" class="sbutton">
            </div>
    </div>



</body>
</html>
Теги:

1 ответ

0

Попробуй это

.outer-top{
   border: 1px solid black;
   height:400px;
}

Ваш внешний верхний div должен иметь указанную высоту. В моем собственном случае мой 400px

Поделиться
  • 0
    Привет, спасибо за ответ, к сожалению, у меня все еще есть отзывчивая проблема высоты с этим кодом. ):
  • 0
    @ user3435505 высота текстового поля или панели поиска?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню