Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.07.2022, 12:52   #1
Krasi
Форумчанин
 
Регистрация: 12.02.2010
Сообщений: 787
По умолчанию Верстка: iframe дает лишнюю ширину

При изменении ширины браузера появляется много пустого пространства справа.
Снимок экрана 2022-07-01 в 12.18.43.jpg
Снимок экрана 2022-07-01 в 12.53.38.jpg

Это пространство, как я выяснил, берется от iframe, который вставлен типа как картинка внутри каждой карточки. Когда я поставил ему width: 100%, пространство справа исчезло, все ок, но картинка сжалась до неправильных размеров. Вот мой код, как я это пишу. В стилях родительского div задаю просто ширину и высоту.

Код:
<div class = "instructionelem" onmouseover="this.querySelector('.delete_instruction').style.display = 'block';" onmouseleave="this.querySelector('.delete_instruction').style.display = 'none';" onclick="window.location.href = './page/page<?=$files[$key]['instruction_url_name']?>.php';">
    			        <div class="delete_instruction" style="margin-bottom:-28px; z-index: 10;" onclick="delete_instruction(<?=$files[$key]['instruction_id']?>,<?=$files[$key]['instruction_url_name']?>,this);">Посмотреть</div>
                                <center>
        			            <div class="instructionpreview" style="position: relative; z-index: 3;">
            			            <iframe style="position: relative;" src="./page/page<?=$files[$key]['instruction_url_name']?>.php" id="frame" scrolling=no></iframe>  
            			        </div>
        			            <div style = "margin: 0px 2px; margin-top: 8px; line-height:1.2; height:48px; display:flex; justify-content: center; align-items:center;">
        			                  
        			                <a target=blank href=./page/page<?=$files[$key]['instruction_url_name']?>.php>
        			                    №<?=$cnt?>: <?=mb_strimwidth($files[$key]['instruction_title'], 0, 35, "...");?>
        			                </a>
        			            </div>
        			            <div style="font-size: 14px; font-family: Montserrat; color: green; margin:0px 0px; padding: 0px 0px"><i>Автор: <?=$files[$key]['user_login']?></i></div>
                                <div class = "instructionelemtitle">
                                    <p style = "color: #828282; font-size: 12px; font-family: Montserrat;vertical-align: bottom">
                                        <img src="assets/vector.svg" style="width:28px"></img>
                                        <?=date('F d Y H:i:s.', strtotime(str_replace('-','/', $files[$key]['instruction_first_creation'])))?>
                                    </p>
                                </div>
                                </center>
                        </div>
Когда я убираю вообще этот код, приведенный ниже:
Код:
        			            <div class="instructionpreview" style="position: relative; z-index: 3;">
            			            <iframe style="position: relative;" src="./page/page<?=$files[$key]['instruction_url_name']?>.php" id="frame" scrolling=no></iframe>  
            			        </div>
убирается проблема. То есть мне нужно правильно задать стили, а дело, видимо, с прокруткой. Какой должна быть верстка в данном случае, чтобы страница была по ширине браузера, а не шире ее?

Последний раз редактировалось Krasi; 01.07.2022 в 12:56.
Krasi вне форума Ответить с цитированием
Старый 25.07.2022, 12:35   #2
yellowres
Заблокирован
 
Регистрация: 25.07.2022
Сообщений: 27
По умолчанию

Код:
<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег BODY</title>
  <meta charset="utf-8">
 </head>
<style>
#page{
width:100%;
border: 1px solid red;
}
</style>
 <body>

<div id="page">
hello world
</div>
width ширина в данном случае 100%. растягивает div на всю ширину страницы.
этот html-код, нужно сохранить в виде файла test.html ,
и открыть в браузере.

Последний раз редактировалось yellowres; 25.07.2022 в 12:43.
yellowres вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мобильная верстка - уехала верстка Phillbot HTML и CSS 0 13.04.2017 10:29
Робот закрашивает лишнюю клетку (С#) fo zero fo Помощь студентам 1 28.04.2016 00:12
Как убрать лишнюю форму Frost-56 Общие вопросы Delphi 2 13.06.2012 13:41
должен подгрузиться скрипт который бы создал и вставил в этот див <iframe></iframe> Beni JavaScript, Ajax 1 05.08.2009 14:30
Почему читает лишнюю строку nusik Общие вопросы C/C++ 6 20.05.2009 18:22