Page size equal to Iframe size

Question

How do I make a page that is running inside an Iframe to have exactly the Iframe dimensions? My Iframe has 700px X 500px, but the page that is running inside it occupies half of Iframe or less and creates horizontal and vertical scroll. How do I do it? I already searched the net and only find the size of Iframe, but the page inserted in it. Passing parameters to Iframe(page). Note that it has a width=700 and a heigth=500:

../../ace/ace005a.asp?/GEN/ASP/GEN0001a.asp$$ind_situacao=&tipo_empresa=&ind_classificacao=&p_cod_tipo_contrato=&indsubmit=false&txt_nome_campo_cod=num_contrato&txt_nome_campo_cod_ts=cod_ts_contrato&txt_nome_campo_desc=nome_contrato&ind_tipo_pessoa=J&funcao_executar=PesquisaContratoMontaFilial();&abre_modal=S&ind_alteracao_contrato=&tipo_preco=", "Pesquisa Contrato", 700, 500

See how the page is inside. Frame is big, but the page inside is occupying less than half of Iframe.

Answer 1

The content you’re inserting is over 700x500, so the scroll bars... Using a responsive layout you solve the problem of horizontal scrolling. This can be done with bootstrap or Foundation, whereas the vertical scroll bar must exist to ensure that information is not omitted.

Example using the bootstrap (http://getbootstrap.com/getting-started/) to write a form page:

Form

<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 2

It may not be the best solution if your page content is dynamic and can get bigger than iframe, but try scrolling="no" to disable the Scrolls in iframe.

And the width and height of the page in the iframe src puts 100% to occupy all available space in iframe.